CSS: Cómo crear triángulos

Con CSS3 es posible hacer maravillas, una de ellas es la posibilidad de dibujar formas geométricas, como una elegante banderola.

Os pongo aquí el código para hacerlo:

<style>
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid white;
float:right;
margin-left:10px;
}

.naranja{
background:#FC6;
height:20px;
width:100px;
padding-left:15px;
}

.texto{
float:left;
}
</style>


<div class="naranja">
<div class="texto">Secci&oacute;n</div>
<div class="arrow-left"></div>
</div>