diseño menu

[kakashi20]

hola

quisiera saber como podria hacer este tipo de menu..

https://launidad.co/menu.JPG

algún consejo o idea ?

gracias

[WHK]

sabes programar? tienes algo hecho?

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

Código (html4strict) [Seleccionar] Expandir

<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:

Código (html4strict) [Seleccionar] Expandir

<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.

[kakashi20]

gracias por la ayuda

[WHK]

x nada.