Как сверстать speech bubble?

Question

[Mark321]

Как сделать такое или подскажите где можно готовое взять (внутри должно быть можно писать текст)?


либо такое

Comments

[Alex_mos]

А как нибудь пытались?

[Mark321]

Alex_mos, я знаю только как сделать див и бордер ему задать квадрата или круга, а как такую стрелочку сделать я даже понятие не имею. Возможно просто подсказки хватит

[Alex_mos]

Mark321, можно с помощью псевдоэлемента

Answer 1

[gazes12]

Подключаете иконки через https://fontawesome.com/. Текст в иконке делаете через псевдоэлементы.

Answer 2

[Арсений Матыцин]

Дешево и сердито — див с фоном + псевдоэлемент, который тоже имеет фон, наехать им с помощью позиционирования на сам див. Тут я бы обошелся без бордеров, т.к. стрелку тогда надо филигранно позиционировать.

Компонент здорового человека — SVG.

Answer 3

[Alex_mos]

например

Answer 4

[Kvason]

Либо svg, либо clip-path:polygon();

Answer 5

[SHKD]

Библа иконок, вбейте в поиск к примеру "чат", скачайте иконку в формате .svg и измените ее через редактор.