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