Currently, I have implemented a red pseudo element as part of the background for certain sections on my website.
Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead.
Does anyone know how this can be achieved?
.top-section:before {
opacity: .7;
content: '';
position: absolute;
width: 100%;
height: 600px;
margin-top: 12rem;
transform: skewY(20deg);
background: linear-gradient(-20deg,#fff 0,#fff 67%,red 100%);
z-index: -1;
}
<div class="top-section">
<div class="inner-section">
</div>
</div>