How do I curve a CSS Pseudo element background?

Question

I have a red pseudo element that I am adding to the background of some sections on my site.

Everything works fine, but I want to change it from a straight line to curved one.

Any idea how that could be done?

.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>

Answer 1

One way is to create a clip-path with a custom svg instead to transform pseudo element:

body {
  margin: 0
}

.top-section:before {
  opacity: .7;
  content: '';
  position: absolute;
  width: 100%;
  height: 600px;
  margin-top: 12rem;
  clip-path: url(#svgPath);
  background: linear-gradient(-20deg, #fff 0, #fff 67%, red 100%);
  z-index: -1;
}

<div class="top-section">
  <div class="inner-section">

  </div>
</div>

<!--svg mask-->
<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
            <path d='M1,1c-0.43,0-0.69-0.055-1-0.246V0c0.362,0.213,0.573,0.252,1,0.226V1z'/>
        </clipPath>
    </defs>
</svg>