CSS: come creare delle speech bubble (nuvole dei fumetti)

Come si realizzano delle speech bubble (nuvolette da fumetto) con i CSS? La tecnica che si usa prevede una combinazione di bordi e contenuto generato. Vediamola in dettaglio.

Nei seguenti quattro elementi utilizziamo classi diverse per cambiare il posizionamento della freccia del fumetto:

<div class="speech-bubble speech-bubble-top">Hi there</div>
<div class="speech-bubble speech-bubble-bottom">Hi there</div>
<div class="speech-bubble speech-bubble-left">Hi there</div>
<div class="speech-bubble speech-bubble-right">Hi there</div>

Per prima cosa impostiamo gli stili generali del contenitore:

.speech-bubble {
  position: relative;
  background-color: #000;
  width: 200px;
  height: 150px;
  line-height: 150px; 
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
  margin: 2em auto;
}

Quindi creiamo un blocco vuoto con il contenuto generato:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}

Le dimensioni del blocco sono date dai 15 pixel del bordo, che in questo caso è trasparente. Quindi andiamo a creare le quattro frecce utilizzando i quattro bordi corrispondenti a cui verrà assegnato un colore:

.speech-bubble-top:after {
  border-bottom-color: #000;
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #000;
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.speech-bubble-bottom:after {
  border-top-color: #000;
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.speech-bubble-left:after {
  border-right-color: #000;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}​

I margini negativi sono impostati sullo stesso valore della misura del bordo per rendere visibili le frecce. Potete visionare l'esempio finale in questa pagina.