<div class="one">box-shadow</div>
<div class="two">drop-shadow</div>
<div class="three">box-shadow</div>
<div class="four">drop-shadow</div>
<div class="five">box-shadow</div>
<div class="six">drop-shadow</div>
<div class="seven">drop-shadow</div>
.one,.two,.three,.four,.five,.six,.seven {
margin:10px 20px;
display:inline-block;
font-size:24px;
padding:.5em 2em;
border: 5px dashed #ace;
}
.one {
box-shadow: 4px 4px 4px #fce;
}
.two {
filter: drop-shadow(4px 4px 4px #fce);
}
.three {
background:#ace;
border-radius:8px;
position:relative;
box-shadow: 2px 2px 2px #fce;
}
.three:before {
content:'';
width:0;
height:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #ace;
position:absolute;
right:-15px;
top:15px;
}
.four {
background:#ace;
border-radius:8px;
position:relative;
filter: drop-shadow(2px 2px 2px #fce);
}
.four:before {
content:'';
width:0;
height:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #ace;
position:absolute;
right:-15px;
top:15px;
}
.five {
border:none;
background:linear-gradient(135deg, transparent 5px, #ace 0) top left,
linear-gradient(-135deg, transparent 5px, #ace 0) top right,
linear-gradient(-45deg, transparent 5px, #ace 0) bottom right,
linear-gradient(45deg, transparent 5px, #ace 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
box-shadow: 4px 4px 4px #fce;
}
.six {
border:none;
background:linear-gradient(135deg, transparent 5px, #ace 0) top left,
linear-gradient(-135deg, transparent 5px, #ace 0) top right,
linear-gradient(-45deg, transparent 5px, #ace 0) bottom right,
linear-gradient(45deg, transparent 5px, #ace 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;
filter: drop-shadow(2px 2px 2px #fce);
}
.seven {
text-shadow:4px 4px #fff;
filter: drop-shadow(4px 4px 2px #fce);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.