Creando flechas en páginas web usando sólo CSS

Una cuestión que seguro que has visto implementada muchas veces por toda la Internet son las típicas flechas cuadradas que aparecen generalmente como parte de algún elemento mayor del que forman parte. Me estoy refiriendo a flechas como las que puedes ver en Facebook por ejemplo:

FlechaEnFacebook

o esta otra más pequeña de la misma red social:

FlechaEnFacebookPequena

¿Cómo podemos crear este tipo de flechas (y algunas otras) usando únicamente CSS y sin necesidad de emplear gráficos?

La respuesta es a través del uso inteligente de los bordes en el modelo de cajas de CSS.

Para verlo mejor consideremos cómo se pintan los bordes de un elemento HTML, para lo cual vamos a visualizar un simple div como este:

<div id="mostrarBordes"></div>

con sus cuatro bordes en colores diferentes, con esta regla CSS:

#mostrarBordes {

    width:200px;

    height:200px;

    border-style: solid;

    border-width: 50px;

    border-color: blue red green gray;

}

Nota: todos estos ejemplos están en el archivo "Triangulos.htm" de la descarga al final del post.

De este modo obtendremos en la página un recuadro como este:

Bordes-De-Un-Div

Lo primero interesante que podemos observar es que cada borde se separa del anterior mediante una línea recta formando un ángulo de 45º. Si pensamos en ello, bastaría con reducir el tamaño del contenido del div a cero para que la base del paralelogramo que es cada borde se convirtiese en un triángulo. Algo así:

#bordesSinContenido {

    width:0px;

    height:0px;

    border-style: solid;

    border-width: 50px;

    border-color: blue red green gray;

}

Que nos da por pantalla esto:

Triangulos-Con-Los-Bordes

¡Perfecto! Esto ya se parece más a lo que estamos buscando. Ahora tenemos cuatro triángulos, cada uno apuntando a una dirección diferente en el centro. He puesto cada uno de un color diferente para que se aprecie mejor cuál es cual.

Bien, ahora si queremos que generar un único triángulo lo que deberíamos hacer es librarnos de los demás….

Lee el post completo en JASoft.org: http://www.jasoft.org/Blog/post/Creando-flechas-en-paginas-web-usando-solo-CSS.aspx

Sin categoría

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *