CSS Arrow please

CSS Arrow please nos ayuda a crear flechas con distintos estilos y nos da las reglas necesarias para copiarlas y aplicarlas a nuestras páginas web.

Basta entrar al sitio y seleccionar las distintas opciones que terminarán generando algo similar a esto:

.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;
}

Colocando eso en una etiqueta STYLE, luego, podemos usar la clase de este modo:

<div class="arrow_box"> abcde </div>

abcde

A partir de allí, nada impide modificarla, establecer su ancho, el tipo de fuente, cambiar los colores o las distintas propiedades para adaptarla a nuestras necesidades y gustos personales:

ejemplo
ejemplo
ejemplo
ejemplo

Todo es cuestión de probar y de entender el funcionamiento de los pseudo-elementos :after y :before:

Curabitur aliquam sem ut risus auctor auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.