JMiur [E]

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.

3 comentarios:

XiC Nou Barris  

hola jmiur, me ha quedado perfecto,,, solo una consulta, como puedo darle más altura para que no me quede tan pegado el texto del título dentro de la flecha???? he probado ponerle más "height" pero no me lo reconoce.
muchas gracias

JMiur  

Lo más simple es agregar la propiedad paddding dentro de la regla .arrow_box {}; por ejemplo:
padding: 10px 0;
con cualquier valor; en este caso, son 10 pixeles arriba y abajo.

XiC Nou Barris  

muchas gracias jmiur,,,, solucionado

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR