Помогите сверстать

Question

В макете попалось такое вот нестандартное окошечко. Может быть кто-то сталкивался с подобным?

В этом окошечке будет размещаться текст. Возможно ли сделать данное окно кодом, чтобы было точь-в-точь как на макете? У меня наибольшую трудность вызывает сделать выпирающий снизу элемент.

Буду очень благодарен за помощь.

Answer 1

body {
  background: rgb(60, 65, 60);
}

.rectangle {
  width: 200px;
  border: 1px solid white;
  border-radius: 8px;
  transform: skewX(10deg);
  position: relative;
  margin-left: 20px;
  margin-top: 20px;
}

.rectangle .text {
  z-index: 4;
  position: relative;
  color: white;
  padding: 20px;
  transform: skew(-10deg);
}

.rectangle:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  left: 7px;
  top: 7px;
  background: grey;
}

.rectangle:before {
  content: '';
  position: absolute;
  width: 21px;
  height: 21px;
  border-radius: 4px;
  bottom: -14px;
  background: grey;
  left: 50%;
  transform: translate(-50%, 0) rotate(45deg) skew(-10deg);
}

<div class="rectangle">
  <div class="text">This is text</div>
</div>

БЛОГ НА HUSL

Помогите сверстать

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