Как изогнуть CSS фон псевдоэлемента?

Question

У меня есть красный псевдоэлемент, который я добавляю к фону некоторых разделов на моем сайте.

Все отлично работает, но я хочу изменить его с прямой линии на изогнутую.

Есть идеи, как это можно сделать?

.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

Один из способов - создать clip-path с пользовательским svg вместо преобразования псевдоэлемента:

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>