Crea tu web, tutor html, css
 

Globo de diálogo con CSS

En los comics es habitual ver, junto a los personajes, una especie de nube con flechita conteniendo el texto que esté hablando ese personaje. También se usa para onomatopeyas de objetos chocando o moviéndose. Es la manera de escribir en papel los sonidos de la historieta.

Este elemento puede crearse en una página web usando estilos CSS. Es aplicable por ejemplo en las típicas imágenes donde los usuarios hablan de nuestros productos.

El código HTML

El código para este elemento es muy simple: basta un bloque div. En el ejemplo vamos a usarlo para mostar una viñeta con una imagen y un globo de diálogo con un texto.

Para no complicarnos uso dos bloques div uno sobre otro. El de arriba será el que se use para el globo de texto y el de abajo para contneer la imagen. Ambos están en un contendor con clase card

<div class="card">
  <div class="globo">
  Este sitio me parece muy interesante, ideal para comenzar
  </div>
  <div >
   <img class="imagen" src="foto.jpg" alt="">
  </div>
</div>

Los estilos CSS

Y aquí está la magia, los estilos para dar forma al contenido. Ya sabes que CSS es fundamental para que la página web se vea de una u otra manera. La clave aquí está en montar un bloques div, con forma de flechita apuntando a la imagen, sobre el bloque con el texto. Este bloque deberá tener posicionamiento relative para poder situar la flechita.

Las flechas con CSS se construyen con los bordes de un blqoue div, que se añade mediante CSS, con el pseudo elemento :after, al que le daremos un posicionamiento absoluto para situarlo donde nos interese en relación a la imagen.

El bloque con clase card es para actuar como contenedor de todo. Es un flexbox para que texto e imagen queden alineados y en vertical.

El bloque con clase globo es el que va a contener el texto y al que se le agrega el triángulo  o flecha que apunta a la imagen,

Y el blqoue imagen es simplemente para la imagen, aquí la colocamos en una caja redonda y ya está, Puedes comprobar el código y ver como queda en la muestra contruída con este código

.card{
   width: 100px;
   margin: 40px auto;
   display: flex;
   flex-direction: column;
   }
.globo{
   border-radius: 25px;
      padding: 12px;
      background: gray;
      color: white;
   padding: 10px;
   position: relative;
   width: 200px;
   margin: 0 auto;
   font-family: sans-serif;
   z-index: 1;
   }
.globo::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 80px;
   background: transparent;
   width: 0px; height: 0px;
   border-bottom: 40px solid gray;
   border-right: 40px solid transparent;
   border-left: 40px solid transparent;
   transform: rotate(90deg);
   z-index: -1;
   }
.imagen {
   width: 141px;
   border-radius: 50%;
   border: 8px double #f5e8e8;
   width: 100px;
}