Lista con bordes en forma de romboide

[0le0]

Hola a todos, ya tenía rato que no entraba al foro y después de buscar y buscar no he hallado una solución a algo que quiero hacer.
Tengo un a lista <ul> con sus respectivos <li> con una imagen de fondo a la derecha pero al aplicarle un color de fondo no me gusta como queda, por lo que pido ayuda a uds. miembros del foro.

Dejo una imagen de la lista que tengo y lo que quiero hacer es que se vea como romboides en lugar de puros rectángulos con la imagen de fondo.



Vistazo de la imágen


Y este el código css que uso:

Código:

#nav2 a {
		float: left;
		display: block;
		padding: 6px 30px 6px 5px;
		text-decoration: none;
		font-weight: bold;
		font-size: 90%;
		color: #333333;
		background: #ECECEC url(../img/nav_slant.gif) no-repeat top right;
		}

Espero me puedan ayudar!

[ZoroRoronoa]

pues no te has especificado muy bien, y entendi a medias, pero...

Lo puedes hacer con un diseño y para el hover puedes usar sprites, para que solo cambie de color el romboide.

Saludos.

[soratofx]

como te dicen usa sprites, la imagen la debes de cortar hasta despues del la linea diagonal "/" para formar un cuadro y en el hover le agregas el efecto

[saul123]

Hola

yo recomendaría que hicieras tu diseño en photoshop y despues lo metieras como una imagen en el background del botón , ahora con el html5 puedes agregar dos imagenes .

[0le0]

Trataré de explicar mejor lo que quiero:

Tengo una lista y hago que se alinie de manera horizontal,algo como un menu, ya saben pero sin elementos descendientes y le he puesto una imagen de fondo alineada a la derecha para que se vea la separación, pero una vez hecho eso solo se ve como un rectángulo o un bloque con texto. En la imagen que subí detallo que al final se ve el rectángulo y yo quisiera que se vea como un romboide

Así lo tengo, la imágen es solo la línea en diagonal con fondo transparente alineada a la derecha y al agregarle el color de fondo rellena todo el elemento <li> haciendo que se vea un rectángulo con una línea diagonal al final.
Lo tengo así:

Código:

------------------------------------------------------------
|                / |                  / |               / |
|               /  |                 /  |              /  |
------------------------------------------------------------

Y lo quiero así:

Código:

   
    --------------------
  /                     /
 /                     /
/                     /
----------------------

Pero la imagen que uso tiene fondo transparente pero no se que tengo que hacer para que se vea como yo quiero.

[jomaruro]

Hola:

Pues tendrás que crear dos imágenes más una para el lado izquierdo y otra para el lado derecho quitándole o cambiándole el fondo.

Saludos.