Задать вопрос
vanesxl
@vanesxl

Как сделать такой диалог?

Здравствуйте,
скажите пожалуйста как я могу сделать такой блок, вот в таком стиле:
73078ab04e8c49e4adaa1084db44117a.png
Только внутри него будет текст и желательно чтоб по высоте он мог растягиваться.
Смотрю в интернете, но ничего не подходит, не знаю как это называется.
Заранее большое спасибо!
  • Вопрос задан
  • 1123 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 3
@IllusionTurtle
Ответ написан
Комментировать
@soledar10
html css3 js jquery
Пример https://jsfiddle.net/soledar10/85g22ruh/

<div class="b-tooltip">
  text text text
</div>

.b-tooltip{
  background: #fff;
  position: relative;
  display: inline-block;
  padding: 15px;
  border: 5px solid #666;
  border-radius: 10px;
}
.b-tooltip:before,
.b-tooltip:after{
   content: '';
   position: absolute; top: 100%; 
   width: 0;
  height: 0;
  border-style: solid;
}
.b-tooltip:before{
 left: 10px;  
  border-width: 30px 30px 0 0;
  border-color: #666 transparent transparent transparent;
}
.b-tooltip:after{
  left: 15px;  
  border-width: 18px 18px 0 0;
  border-color: #fff transparent transparent transparent;
}
Ответ написан
delphinpro
@delphinpro Куратор тега CSS
frontend developer
эх, пока писал код, тут уже накидали вариантов.... :(

https://jsfiddle.net/DelphinPRO/py4gLqjy/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
GoooodBoy
@GoooodBoy
Через псевдо-элемент. Это самый практичный способ.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы