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

#svg #sass #scss #less #clip_path

Необходим специфический 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 за кусок его кода использованный здесь 

(!) согласен и на любые другие варианты, дающие такой же результат.


    

Ответы

Ответ 1

Необходимые координаты в 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);
}