Вот как я бы это сделал: я бы использовал элемент SVG. ClipPath имеет clipPathUnits="objectBoundingBox"
, а путь имеет все значения в диапазоне от 0 до 1.
svg{position:absolute}
.section-test {
padding: 25px 0;
background-image: url(https://res.cloudinary.com/ddioeulgw/image/upload/v1548437500/test/hero.png);
background-size: cover;
height: 85vh;
clip-path: url(#clip);
}
<svg height="0" width="0" >
<defs>
<clipPath id="clip" clipPathUnits="objectBoundingBox">
<path d="M0,0 L0,.5 A1,1 0 0 1 1,.5 L1,0 0,0" />
</clipPath>
</defs>
</svg>
<section class="section-test">
</section>
Надеюсь, это поможет.
clipPathUnits = "objectBoundingBox" : Это значение указывает, что все координаты внутри элемента относятся к ограничительной рамке элемента, к которому применяется путь отсечения. Это означает, что источником системы координат является верхний левый угол ограничивающего прямоугольника объекта, а ширина и высота ограничивающего прямоугольника объекта имеют длину, равную единице значения.
MDN цитата