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

Question

[VaneS Ri_Lax]

Здравствуйте,
скажите пожалуйста как я могу сделать такой блок, вот в таком стиле:

Только внутри него будет текст и желательно чтоб по высоте он мог растягиваться.
Смотрю в интернете, но ничего не подходит, не знаю как это называется.
Заранее большое спасибо!

Answer 1

[IllusionTurtle]

cssdeck.com/labs/full/rchqydmj

Answer 2

[Дмитрий]

Пример 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;
}

Comments

[VaneS Ri_Lax]

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

[Дмитрий]

треугольник получается с помощью :after and :before, также можно воспользоваться сервисом apps.eky.hk/css-triangle-generator

[VaneS Ri_Lax]

Пытаюсь темный треугольник перенести чтоб он был слева, но такой же красивый как сделали вы, пока у меня вот что получилось www.bootply.com/KYA2DiFtmc не понимаю что я делаю не так

[Дмитрий]

https://jsfiddle.net/soledar10/6kv85s3o/

Answer 3

[Сергей delphinpro]

эх, пока писал код, тут уже накидали вариантов.... :(

https://jsfiddle.net/DelphinPRO/py4gLqjy/

Comments

[VaneS Ri_Lax]

а в CSS разве можно создавать переменные?

[VaneS Ri_Lax]

век живи, век учись)))

[Сергей delphinpro]

VaneS Ri_Lax: Это SASS.

[Сергей delphinpro]

на чистом css будет так https://jsfiddle.net/py4gLqjy/1/

Answer 4

[Кирилл]

Через псевдо-элемент. Это самый практичный способ.

Comments

[VaneS Ri_Lax]

а по подробнее можно пожалуйста? Или скажите как это называется?