Как вы это делаете?

Question

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

Каков наилучший способ сделать это без использования изображений?

Answer 1

Эта вещь называется «Речевой пузырь».

p { 
 
    font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; 
 
    font-weight: bold; 
 
    margin: 1em 0; 
 
} 
 

 
.triangle-isosceles { 
 
    position: relative; 
 
    padding: 15px; 
 
    margin: 1em 0 3em; 
 
    color: #fff; 
 
    background: #0095ff; 
 
} 
 

 
.triangle-isosceles:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -10px; 
 
    left: 50px; 
 
    border-width: 10px 10px 0; 
 
    border-style: solid; 
 
    border-color: #0095ff transparent; 
 
    display: block; 
 
    width: 0; 
 
}

<p class="triangle-isosceles">Address</p>

Заканчивать этот пример: http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Answer 2

Вот как это можно сделать:

.box { 
    width: 200px; 
    height: 25px; 
    border-radius: 2px; 
    padding: 5px; 
    font-family: 'Arial'; 
    text-align: center; 
    color: white; 
    background-color: lightblue; 
} 

.box::after { 
    content: ' '; 
    position: relative; 
    top: 36px; 
    left: -75px; 
    border-style: solid; 
    border-width: 7px 7px 0; 
    border-color: lightblue transparent; 
} 

Here is the JSFiddle demo

::after CSS р seudo важно, так как именно это создает маленький курсор внизу.