Foro de elhacker.net

hola

quisiera saber como podria hacer este tipo de menu..

https://launidad.co/menu.JPG (https://launidad.co/menu.JPG)

algún consejo o idea ?

gracias

sabes programar? tienes algo hecho?

Acá hay uno básico sin las puntas triangulares:

<style>
.menu > li{
	display: inline;
	list-style-type: none;
	border: 1px solid #FFFFFF;
	background-color: #FF0000;
	color: #FFFFFF;
	padding: 5px 15px;
    margin: 0;
}
</style>
 
<ul class="menu">
	<li>Inicio</li><li>Servicio</li>
</ul>

Acá hice uno con las puntas triangulares:

<style>
.menu > li{
	display: inline;
	list-style-type: none;
	border: 1px solid #FFFFFF;
	background-color: #FF0000;
	color: #FFFFFF;
	padding: 5px 8px 5px 27px;
    margin: 0;
    position: relative;
    margin-right: 2px;
}
.menu > li:first-child{
    padding: 5px 15px;
}
.menu > li > span:first-child{
    position: absolute;
    top: 0;
    right: -20px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FF0000;
    border-bottom: 15px solid transparent;
    z-index: 9;
}
.menu > li > span:last-child{
    position: absolute;
    top: 0;
    right: -22px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FFFFFF;
    border-bottom: 15px solid transparent;
    z-index: 8;
}
</style>
 
<ul class="menu">
    <li>Inicio<span></span><span></span></li><li>Servicio<span></span><span></span></li>
</ul>

Pruebalo:
http://jsfiddle.net/55LE5/

No se ve muy pro pero te servirá como base para que hagas tu menú, a cada li deberias ponerle un display: block y darle una altura fija, unos 20px y de ahi alinear bien el triangulo y darle un float left a cada item y al final terminas con un clear:both debajo del ul y listo.

gracias por la ayuda

x nada.