Как реализовать даннный блок с вырезом?

Question

Как реализовать даннный блок с вырезом? сложность в том, что у этого блока еще и тень

Answer 1

Сделать прямоугольник с закругленными краями с помощью CSS, а стрелочку отрисовать в png/svg и прилепить сверху.

Answer 2

Пробуйте через трансформацию формы, так:

.class::after{
  content:'';
  position:absolute;
  top: -10;
  left: 50%;
  width:*px;
  height:*px;
  transform;
  background: #color;
  clip-path: polygon(....);
}

Или просто наложение картинки background-img:...; z-index:5; и поднять, без clip-path

Answer 3

Так как в метках вопроса присутствуют только HTML и CSS, то решение стандартное - стрелочку делаем с помощью псевдоэлементов с градиентами, затем добавляем родительскому блоку filter: drop-shadow():

.baloon {
  position: relative;
  margin-top: 20px;
  min-height: 100px;
  min-width: 150px;
  width: max-content;
  padding: 40px;
  border-radius: 50px;
  box-sizing: border-box;
  background-color: #fff;
  filter: drop-shadow(0 0 2px #aab) drop-shadow(0 0 3px #aab8);
}
.baloon::before,
.baloon::after {
  content: '';
  position: absolute;
  bottom: 100%;
  height: 20px;
  width: 45px;
}
.baloon::before { right: 50%; background: 0 0 / 50px 50px radial-gradient( 102px circle at left 5px top -30px, #fff0 calc(50% - 1px), #ffff 50%) no-repeat; }
.baloon::after { left: 50%; background: 100% 0 / 50px 50px radial-gradient( 102px circle at right 5px top -30px, #fff0 calc(50% - 1px), #ffff 50%) no-repeat; }

/* For example only --> */ body { margin: 0; display: grid; place-items: center; min-height: 100vh; overflow: hidden; background-color: #f8f8fa; }

<div class="baloon"><div contenteditable>Измените этот текст</div></div>

БЛОГ НА HUSL

Как реализовать даннный блок с вырезом?

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