Triángulos CSS

Este es un sistema muy básico para conseguir generar un triángulo. Todo se basa en el particular comportamiento de los bordes en CSS, que se muestran aunque su contenido sea nulo o dicho de otra forma, de tamaño cero.

Comenzamos viendo que los bordes se añaden por defecto al tamaño de la caja que rodean y que su color puede ser individualizado. Para ello, las propiedades de color, estilo y ancho las definimos por separado. El orden de los valores de cada propiedad es el habitual, esto es, arriba, derecha, abajo e izquierda.

.t1 {
margin:0 auto;
width:400px;
height:80px;
border-color:red blue yellow green;
border-style:solid;
border-width:10px;
}

...

<div class="t1">TEXTO</div>

Esta caja tiene 400px de ancho, pero con los dos bordes de 10px ocupa un total de 420px. Con el alto ocurre lo mismo y por eso tiene en total 100px.

Y ahora observad lo que ocurre cuando el ancho y alto de la caja lo hacemos igual a cero. Bueno, antes de nada añadimos un display:block; porque de lo contrario lo que veríamos sería nada:

.t2 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:red blue yellow green;
border-style:solid;
border-width:10px;
}

Pues eso es. Vemos sólo los bordes y cada uno tienen un ancho de 10px que es lo que antes indicamos. Fijaos que al igual que pasaba anteriormente cuando había un tamaño para la caja, los bordes forman un bisel en la zona dónde se cruzan. Ese corte sirve para obtener cuatro triángulos, en este caso cada uno de un color distinto.

Para hacer triángulos de mayor tamaño sólo tenemos que aumentar el ancho del borde:

.t3 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:red blue yellow green;
border-style:solid;
border-width:60px;
}

Y entendido esto ahora viene la parte más fácil, extraer un triángulo u otras formas a partir de ese cuadrado formado por cuatro triángulos. Si algún color se repite u otros se hacen transparentes, obtendremos diferentes formas. Por ejemplo, esto es lo que se vería si arriba y abajo damos color negro y los otros dos los hacemos transparentes:

.t4 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:black black tranparent transparent;
border-style:solid;
border-width:60px;
}

¿Y si sólo damos color a la parte izquierda?

.t5 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:transparent tranparent transparent blue;
border-style:solid;
border-width:60px;
}

La manera de añadir estos triángulos a cualquier otra forma es relativamente fácil. En el siguiente ejemplo creamos una caja (rectangular) con un texto y a continuación un triángulo. Este último por el flujo normal del código, se situaría en la línea siguiente por debajo del rectángulo.

Para colocarlo dónde queremos le añadimos un position:relative a la caja principal para poder mover luego el triángulo a dónde nos interese con un position:relative, top y left. El punto de origen con esta combinación (absolute dentro de relative) será la esquina superior izquierda del rectángulo.

.rectangulo {
position:relative;
display:block;
width:200px;
height:40px;
padding:4px 10px 0px 18px;
background:green;
color:white;
text-align:center;
}
.t6 {
position:absolute;
top:-8px;
left:220px;
display:block;
width:0;
height:0;
border-color:transparent transparent transparent green;
border-style: solid;
border-width: 30px;
}

<div class="rectangulo">
Rectángulo+Triángulo =Flecha
<div class="t6"></div>
</div>

Rectángulo+Triángulo =Flecha

También le podemos añadir adicionalmente a la izquierda un segundo triángulo del mismo color que el fondo para conseguir una terminación distinta.

.t7 {
position:absolute;
top:2px;
left:0px;
display:block;
width:0;
height:0;
border-color:transparent transparent transparent black;
border-style: solid;
border-width: 20px;
}

<div class="rectangulo">
Rectángulo+Triángulo =Flecha
<div class="t6"></div>
<div class="t7"></div>
</div>

Rectángulo+Triángulo =Flecha

De esta manera podemos combinar triángulos apuntando hacia arriba, hacia la derecha, etc., pero también en diagonal haciendo opacos o transparentes dos contiguos como hicimos con la figura negra a la que le pusimos la clase .t4.

O usar la mitad de esos si ocultamos parte tras la capa principal como hicimos con las bandas decorativas. En esa entrada también podéis ver cómo agregar formas con :after y :before.

Con otras combinaciones y añadiendo otras propiedades CSS (aquí con border-radius) podemos hacer otras cositas; pero esa es otra historia...

.t8 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:transparent darkblue transparent darkblue;
border-style:solid;
border-width:60px;
border-radius:60px;
}

Para terminar, también podemos hacer triángulos no equiláteros individualizando el ancho del borde, aunque si al menos no los hacemos iguales dos a dos, los resultados serán algo complicados de imaginar previamente.

Dos opuestos iguales para obtener isósceles:

.t9 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:red blue yellow green;
border-style:solid;
border-width:40px 80px 40px 80px;
}

Y todos distintos para escalenos:

.t10 {
display:block;
margin:0 auto;
width:0;
height:0;
border-color:red blue yellow green;
border-style:solid;
border-width:120px 60px 40px 160px;
}

Por último un ejemplo de forma compuesta con dos triángulos, creando el segundo con :after:

.t11 {
position: relative;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid red;
}
.t11:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid red;
margin: 30px 0 0 -50px;
}

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Copy URL

Y muchos más artículos interesantes si nos sigues en...

Oloblogger

Páginas

Oloblogger

23 de septiembre de 2012

Triángulos CSS

Compartir

1 comentario :

Referencias