Código de un menu ejemplo que no entiendo

[cluster28]

Buenas,

Alguién podría explicarme cómo funciona exactamente este menú para muestre las flechas de los costados? http://www.cssplay.co.uk/menus/menusix.html

Por mucho que miro el código no me queda claro.

Muchas gracias.

[Mikmoro]

De una manera sencilla e ingeniosa: los bordes de una caja se unen en las esquinas formando un ángulo de 45 grados en ambas partes. Si pones un borde izquierdo rojo (por ejemplo), y un borde superior blanco, lo que verás será que el lado izquierdo termina arriba en 45 grados, porque el resto lo ocupa el borde superior blanco (sobre un fondo blanco, claro). Si ahora pones un borde inferior también blanco y no pones altura a la caja, el resultado será un borde izquierdo que termina en un ángulo de 45 grados arriba y abajo, es decir, una flecha.

Prueba esto:

HTML

<div id="uno"></div>

CSS

#uno {width: 200px;border-top: 30px solid #f00;border-bottom: 30px solid #f00; border-left: 30px solid #00f;}

Invierto los colores para que veas el efecto, e imagina que pones los bordes superior e inferior blancos.

Supongo que se entenderá bien.

[cluster28]

Ok, muchas gracias, comprendido. El ejemplo que has puesto lo deja muy claro.

[Aresillo]

En un principio no lo había cogido... pero probando el ejemplo es un buen recurso...
Gracias Mik!

Aresillo!!