Blog de Marketing Online

Triángulos en CSS

2 comentarios

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;
}

Jesús QuintanaTriángulos en CSS

2 comments

Únete a la conversación
  • alber - 16 diciembre 2009

    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

  • angro - 24 enero 2012

    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

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