Сложный polygon на препроцессорах

Необходим специфический clip-path: polygon() по точкам. Какой-никакой пример в коде ниже.
.wrapper { width: 960px; height: 720px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-image: url(http://beerhold.it/960/722); background-repeat: no-repeat; backgorund-position: center center; position: relative; } .key { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10em; height: 10em; border: 2em solid rgba(255, 255, 255, .3); border-radius: 10em; } .block1, .block2 { position: absolute; top: 0; width: 480px; height: 720px; } .block1 { left: 0; background-color: rgba(255, 0, 0, .2); } .block2 { right: 0; } .block3 { top: 0; width: 100%; height: calc(50% - 7em); background: rgba(0, 0, 0, 0.7); } .block4 { top: calc(50% - 7em); background: rgba(0, 0, 0, 0.7); width: 100%; height: 14em; clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 94%, 15% 88%, 22% 78%, 29% 69%, 34% 60%, 34% 48%, 33% 36%, 30% 22%, 23% 14%, 12% 7%); } .block5 { bottom: 0; height: calc(50% - 7em); width: 100%; background: rgba(0, 0, 0, 0.7); }

Как заметно, на данный момент это просто кривая, вогнутая в фигуру. Задача нарисовать полуокружность(или максимально приблизить к ней), вогнутую в фигуру. В моём понимании для этого нужны less, sass и прочее. А также sin, cos. Плохо понимаю с чего и как начать, не сталкивался с этим. Спасибо @AndreyFedorov за кусок его кода использованный здесь
(!) согласен и на любые другие варианты, дающие такой же результат.

Ответ

Необходимые координаты в path
120 — радиус круга; если надо уменьшить, то уменьшать обе координаты 240 — высота блока 1000 — длина блока
При необходимости повернуть вырез, воспользуйтесь атрибутом transform="rotate()"
* { margin: 0; padding: 0; } .btn { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 10px solid rgba(255,255,255,0.4); top: 130px; left: -120px; background: transparent; box-sizing: border-box; } .btn:hover { border-color: rgba(255,255,255,0.7); } .image { background-image: url(https://s3.amazonaws.com/finely/resources/test.jpg); background-size: cover; background-position: center; width:100%; height:500px; } .image__right { position: absolute; width:50%; right: 0; top: 0; } .placeholder { height:130px; background: rgba(0,0,0,0.5); } .border-mask { height: 240px; background: rgba(0,0,0,0.5); -webkit-clip-path: url(#circleClip); clip-path: url(#circleClip); }