Foros del Web » Creando para Internet » CSS »

Lista con bordes en forma de romboide

Estas en el tema de Lista con bordes en forma de romboide en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/04/2011, 18:29
 
Fecha de Ingreso: octubre-2008
Mensajes: 109
Antigüedad: 9 años, 1 mes
Puntos: 0
Lista con bordes en forma de romboide

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!
  #2 (permalink)  
Antiguo 26/04/2011, 19:13
Avatar de ZoroRoronoa  
Fecha de Ingreso: marzo-2011
Ubicación: California, USA
Mensajes: 823
Antigüedad: 6 años, 8 meses
Puntos: 116
Respuesta: Lista con bordes en forma de romboide

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.
__________________
Programador jQuery & PHP
  #3 (permalink)  
Antiguo 27/04/2011, 00:40
 
Fecha de Ingreso: diciembre-2008
Ubicación: Merida
Mensajes: 12
Antigüedad: 9 años
Puntos: 1
Respuesta: Lista con bordes en forma de romboide

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


Última edición por soratofx; 27/04/2011 a las 00:47
  #4 (permalink)  
Antiguo 27/04/2011, 05:16
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: Lista con bordes en forma de romboide

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 .
  #5 (permalink)  
Antiguo 27/04/2011, 10:09
 
Fecha de Ingreso: octubre-2008
Mensajes: 109
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Lista con bordes en forma de romboide

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.

Última edición por 0le0; 27/04/2011 a las 14:29
  #6 (permalink)  
Antiguo 30/04/2011, 05:05
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Lista con bordes en forma de romboide

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.


Etiquetas: bordes, lista, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:49.