<div class="block"></div>
body{
margin: 0;
}
.block{
height: 200px;
width: 100%;
position: relative;
background: linear-gradient(to right, rgba(241,231,103,1) 0%, rgba(254,182,69,1) 100%);
}
.block:after{
content: '';
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: right bottom;
transform: skewY(-3deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.