Подскажите пожалуйста, как сверстать вот такую фигуру?

Question

Подскажите пожалуйста, как сверстать вот такую фигуру?

Рейтинг: 0Ответов: 1Опубликовано: 31.05.2023

Вот такая фигура на макете, не понимаю, как это лучше сверстать. Я хотела перекрыть кругом верхнюю часть, но не получается из-за box-shadow

1: https://i.sstatic.net/bPHru.png

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Тень для сложных контуров необходимо делать с помощью filter: drop-shadow() :

.figure {
  position: relative;
  margin-top: 45px;
  height: min(70vh, 340px);
  border-radius: 0 0 12px 12px;
  background-color: #fff;
  filter: drop-shadow(0 4px 8px #0004);
}
.figure::before,
.figure::after {
  content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Cpath class="path" d="M 0 12 A 12 12 0 0 1 18 4 Q 88 30 130 35 H 0 Z" fill="%23fff"%3E%3C/path%3E%3C/svg%3E');
  position: absolute;
  bottom: calc(100% - 1px);
  height: 35px;
  width: 130px;
}
.figure::before { left: 0; }
.figure::after { right: 0; transform: scaleX(-1); }

<div class="figure"></div>

Подскажите пожалуйста, как сверстать вот такую фигуру?

Ответы