<div class="img"></div>
<div class="block"></div>
.img {
display: block;
position: relative;
background: #1395ba;
width: 500px;
height: 250px;
margin: 50px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}
.block {
background: #2499d5;
position: relative;
z-index: 1;
width: 500px;
height: 250px;
margin: 50px;
}
.block:after {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
transform: skewY(-5deg);
transform-origin: 100%;
z-index: -1;
}
.block:before {
background: inherit;
bottom: 0;
content: '';
display: block;
height: 50%;
top: 0;
position: relative;
right: 0;
transform: skewY(5deg);
transform-origin: 100%;
z-index: -1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.