Inicio »

Blog

Triángulos en CSS

Usando bordes transparentes, se pueden generar infinidad de formas usando css:

.multiborde {
border-color: green red blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}


.flechaiz {
border-color:transparent #000 transparent transparent;
border-style:solid;
border-width:10px 20px 10px 0;
width:0;
}


.flechader {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width:10px 10px 10px 20px;
width:0;
}


.flechatop {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}


.flechabot {
border-color:transparent transparent #000000;
border-style:solid;
border-width:0 13px 13px;
width:0;
}

2 comentarios para “Triángulos en CSS”

  1. alber dice:

    Hola muy interesante los triángulos en css pero no se ve correctamente en IE6.
    Ya sé que está obsoleto pero aún muchos millones de usuarios lo utilizan.

    Un saludo y gracias

  2. angro dice:

    A pesar de tener 3 años, sigue siendo un buen truco.

    Para los que vengan buscando lo mismo que yo, quiero comentar algo más.

    Este truco es básicamente hacer transparentes los bordes de 3 en 3, y salen las 4 flechas.

    Pero también se pueden hacer las de las esquinas, es decir, superior derecha, superior izquierda, inferior derecha e inferior izquierda. Sólo hay que hacer transparentes los bordes de 2 en 2 y salen las 4 esquinas.

Deja un comentario