Как сделать такой вырез у фигуры?

Question

Как сделать такой вырез у фигуры? Желательно на css.

Answer 1

Предложу один из вариантов, на чистом css

.container {
  position: relative;
  width: 400px;
  height: 150px;
  background: red;
}

.container:after {
  position: absolute;
  content: '';
  width: 150px;
  height: 75px;
  background: #fff;
  left: 125px;
  border-bottom-right-radius: 90px;
  border-bottom-left-radius: 90px;
}

<div class='container'></div>

Вся фишка в border-radius, если задать слишком больше значение, то можно получить скругленные углы

P.S. при клике в пустоту, вы все равно будите кликать в элемент, поэтому если вам нужно именно пустота, то этот вариант не подойдет

Answer 2

CSS чище некуда:

body { background: url("https://i.stack.imgur.com/m9NKc.png") no-repeat; }

.notch {
  margin: 25vh auto; opacity: .9;
  /* Дизайнеру вырвать руки за то, что сначала вырезает, а после растягивает */
  height: 208px; width: 594px;
  background-image: radial-gradient(50px 47px at top, transparent 80px, #e33d32 81px);
}

<div class="notch"></div>

БЛОГ НА HUSL

Как сделать такой вырез у фигуры?

Ответы (2 шт):