HTML CSS
(a quick guide)
<div class="speech"> Lorem ipsum dolor sit amet. </div>
Lorem ipsum dolor sit amet.
.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; }
Lorem ipsum dolor sit amet.
<div class="speech bottom"> Lorem ipsum dolor sit amet. </div>
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; }