0

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

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

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

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

1
  • просто псевдоэлемент развернуть под 45 градусов не ужели сложно Commented 18 мая 2020 в 18:47

1 ответ 1

2

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>

1
  • Спасибо большое!
    – cmroonn
    Commented 18 мая 2020 в 19:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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