En muchas ocasiones necesitamos colocar en una página web un triángulo, ya sea para señalar algo con una flecha, en una paginación de una galería o listado de cualquier cosa, o incluso para ponerle a una capa esquinas con cierta forma poligonal (donde obviamente no son redondeadas).
Es posible que de primeras pensemos en colocar imágenes con dichas formas, pero hay que tener en cuenta el papel de los bordes en las capas HTML. Los bordes al formarse se generan en ángulo, es decir, si a una capa le ponemos anchura 0 y altura 0, y le damos tamaño a sus bordes veremos cómo estos tienden hacia el centro de la capa. Si hacemos esto, veremos un cuadrado normal y corriente.
Supongamos el siguiente código HTML:
< span id="flecha" >
Si le asignamos el siguiente código CSS:
#flecla {
display: block;
width: 0;
height: 0;
border: 10px solid red;
}
Esté código genera un cuadrado rojo con anchura 10 px. Ahora bien el truco consiste en los bordes transparentes. Si hacemos que 3 de los 4 bordes sean transparentes, entonces conseguiremos la flecha buscada, concretamente una flecha con ángulos de 45º.
Esto lo conseguimos añadiendo al CSS anterior:
border-width: 10px; border-color: red transparent transparent transparent;
Esto genera una flecha hacia abajo. Si el color rojo lo colocamos a la derecha entonces tendremos una fecha hacia la izquierda, es decir, siempre se genera la punta hacia el centro de la capa, el lado contrario a donde coloquemos el color. Eso sí no solo se pueden hacer formas triangulares de 45º, estos ángulos se pueden variar jugando con los tamaños de los bordes.
Ejemplo:
border-width: 40px 10px 10px 10px;
Jugando con el tamaño del lado donde le damos el color haremos que la flecha se haga más larga, imitando a un banderín. Esto se aplica a todos los lados, es decir si al bottom le incrementamos el tamaño este se hará más largo por tanto si lo reducimos a 0 alcanzaremos un ángulo de 90º.
Es posible llegar a realizar la bandera de Inglaterra solo con CSS, puesto que se compone de una serie de triángulos. Para colocar una capa con esquinas triangulares, basta poner dicha forma con posición absoluta y colocar otra capa extra como lateral para cubrir donde termina la forma triangular.
Comentarios