HTML CSS

PURE HTML CSS SPEECH BUBBLE

(a quick guide)

<div class="speech">   Lorem ipsum dolor sit amet. </div>

Lorem ipsum dolor sit amet.

SIMPLE TEXT BOX HTML

01

.speech {   FONT   font-family: arial, sans-serif;   font-size: 1.1em;     COLOR   color: #fff; background: #a53d38;     DIMENSIONS + POSITION   position: relative; max-width: 320px;   padding: 20px; border-radius: 10px; }

SIMPLE TEXT BOX CSS

02

Lorem ipsum dolor sit amet.

<div class="speech bottom">   Lorem ipsum dolor sit amet. </div>

"WITH CALLOUT TAIL" HTML

03

bottom.speech::after {   DOWN TRIANGLE   border-top-color: #a53d38;   border-bottom: 0;     POSITION AT BOTTOM   bottom: -20px; left: 50%;   margin-left: -20px; }

.speech::after {   ATTACH TRANSPARENT BORDERS   content: "";   border: 20px solid transparent;     NECESSARY TO POSITION THE "TAIL"   position: absolute; }

"WITH CALLOUT TAIL" CSS

04