3

введите сюда описание изображения

как сделать такую форму с выемкой внизу?

1

1 ответ 1

3

Пример на CSS. Если постараться, то можно сделать аккуратнее.

Дополнительные примеры здесь: Как сделать плавную выпуклость?

body {
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .1) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
}

.block {
  box-sizing: border-box;
  position: relative;
  width: 400px;
  min-height: 100px;
  padding: 0 20px;
  margin: 50px;
  border-top: 3px solid #ebecf0;
  border-left: 3px solid #ebecf0;
  border-right: 3px solid #ebecf0;
  border-radius: 20px 20px 0 0;
}

.block:before,
.block:after {
  content: "";
  display: block;
  position: absolute;
  width: 141px;
  height: 40px;
  bottom: -20px;
}

.block:before {
  left: -3px;
  border-bottom: 3px solid #ebecf0;
  border-left: 3px solid #ebecf0;
  border-radius: 0 0 0 20px;
}

.block:after {
  right: -3px;
  border-bottom: 3px solid #ebecf0;
  border-right: 3px solid #ebecf0;
  border-radius: 0 0 20px 0;
}

.bulge {
  position: absolute;
  left: calc(50% - 20px);
  bottom: -53px;
  width: 40px;
  height: 40px;
  border-bottom: 4px solid #ebecf0;
  border-right: 4px solid #ebecf0;
  border-radius: 0 0 20px 0;
  transform: rotate(45deg) skew(-5deg, -5deg);
}

.bulge:before {
  content: "";
  display: block;
  position: absolute;
  left: -22px;
  top: 35px;
  width: 16px;
  height: 20px;
  border-bottom: 5px solid #ebecf0;
  border-right: 5px solid #ebecf0;
  border-radius: 0 0 20px 0;
  transform: rotate(-144deg) skew(-10deg, -28deg);
}

.bulge:after {
  content: "";
  display: block;
  position: absolute;
  right: -17px;
  bottom: 37px;
  width: 16px;
  height: 20px;
  border-bottom: 5px solid #ebecf0;
  border-right: 5px solid #ebecf0;
  border-radius: 0 0 20px 0;
  transform: rotate(160deg) skew(-10deg, -28deg);
}

p {
  font-size: 16px;
  font-family: monospace;
  font-style: italic;
  color: lightgray;
}
<div class="block">
  <div class="bulge"></div>
  <p>Я вас любил: любовь еще, быть может,<br>В душе моей угасла не совсем;<br>Но пусть она вас больше не тревожит;<br>Я не хочу печалить вас ничем.<br>Я вас любил безмолвно, безнадежно,<br>То робостью, то ревностью томим;<br>Я вас любил так искренно, так нежно,<br>Как дай вам бог любимой быть другим.</p>
</div>

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.