HTML5: Como hacer un menu con flechas o triángulos

por | Mar 21, 2014 | CSS, Diseño, html

Antes la única forma de hacer un menu cuyos bordes terminaran en punta era utilizando imágenes de fondo. Sin embargo ahora es posible hacerlo aunque siempre debe recordarles que este truco sólo funciona en navegadores modernos, así que no me pidan hacks para que funcione en IE6 ni nada por el estilo

 

Paso 1

Primero veamos la estructura, voy a utilizar UL y LI, si desean pueden agregar links, no cambia en nada:

1
2
3
4
5
<ul class="pasosPedido">
    <li class="arrow_box op1">PASO 1. MI CESTA</li>
    <li class="arrow_box op2 activo">PASO 2. DATOS DE ENVIO</li>
    <li class="arrow_box op3">PASO 3. METODO DE PAGO</li>
</ul>

Aqui es importante notar que las opciones van numeradas eso es para poder indicar que el borde triangular debe ir por encima de la opción siguiente

 

Paso 2

Los estilos generales como quitar margenes, padding o estilo de listado no los pongo aqui (en el ejemplo están), sino que vamos al grano. Para añadir el borde triangular uso la propiedad content que añadirá un espacio luego del elemento y jugando con el color de borde haré que no sea cuadrado sino triangular

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.pasosPedido .arrow_box:after, .pasosPedido .arrow_box:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.pasosPedido .arrow_box:after {
border-color: rgba(232, 238, 238, 0);
border-left-color: #e8eeee;
border-width: 18px;
margin-top: -18px;
}

Como mencioné al inicio los elementos deben ir numerados para que la flecha no quede oculta detrás del elemento siguiente, eso se logra con las siguientes líneas:

1
2
3
4
5
6
7
8
9
.pasosPedido .op1 {
z-index: 3;
}
.pasosPedido .op2 {
z-index: 2;
}
.pasosPedido .op3 {
z-index: 1;
}

 

Paso 3

Finalmente he añadido la opción que quede un elemento marcado como activo con otro color

1
2
3
4
5
6
.pasosPedido li.activo {
background-color: #BBC6C8;
}
.pasosPedido li.activo:after {
border-color: rgba(232, 238, 238, 0) rgba(232, 238, 238, 0) rgba(232, 238, 238, 0) #BBC6C8;
}

 

Conclusión

Puedes ver el ejemplo funcionando AQUI, o puedes descargar los archivos del ejemplo dándole like o tweet al post

[social-download button_id=»1f3ed579b39e7f041″ dl_id=»http://www.miguelmanchego.com/wp-content/uploads/2014/03/menu-borde-triangular.zip» theme=»blue» message=»Compartelo para poder descrgar los archivos del ejemplo» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]