Como crear cajas con flechas con CSS Arrow Please

CSS Arrow Please es una aplicación que de modo fácil e interactivo nos permite generar esas llamativas cajas con flechas sin siquiera utilizar una imagen: puro CSS

Una muestra de ejemplo de las declaraciones en CSS para generar ese tipo de cajas, se ve a continuación:

.arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } 
.arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } 
.arrow_box:after { border-left-color: #88b7d5; border-width: 30px; top: 50%; margin-top: -30px; } .arrow_box:before { border-left-color: #c2e1f5; border-width: 36px; top: 50%; margin-top: -36px; }

Tanto el sentido de la flecha como el color de fondo y el color del borde son completamente personalizables a conocimeinto previo del código hexadecimal deseado.

Sitio Web | CSS Arrow Please