Foros del Web » Creando para Internet » CSS »

Código de un menu ejemplo que no entiendo

Estas en el tema de Código de un menu ejemplo que no entiendo en el foro de CSS en Foros del Web. Buenas, Alguién podría explicarme cómo funciona exactamente este menú para muestre las flechas de los costados? http://www.cssplay.co.uk/menus/menusix.html Por mucho que miro el código no me ...
  #1 (permalink)  
Antiguo 10/01/2009, 16:06
Avatar de cluster28  
Fecha de Ingreso: enero-2008
Ubicación: Donostia - San Sebastián
Mensajes: 752
Antigüedad: 9 años, 11 meses
Puntos: 32
Código de un menu ejemplo que no entiendo

Buenas,

Alguién podría explicarme cómo funciona exactamente este menú para muestre las flechas de los costados? http://www.cssplay.co.uk/menus/menusix.html

Por mucho que miro el código no me queda claro.

Muchas gracias.
  #2 (permalink)  
Antiguo 10/01/2009, 17:52
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Código de un menu ejemplo que no entiendo

De una manera sencilla e ingeniosa: los bordes de una caja se unen en las esquinas formando un ángulo de 45 grados en ambas partes. Si pones un borde izquierdo rojo (por ejemplo), y un borde superior blanco, lo que verás será que el lado izquierdo termina arriba en 45 grados, porque el resto lo ocupa el borde superior blanco (sobre un fondo blanco, claro). Si ahora pones un borde inferior también blanco y no pones altura a la caja, el resultado será un borde izquierdo que termina en un ángulo de 45 grados arriba y abajo, es decir, una flecha.

Prueba esto:

HTML
Cita:
<div id="uno"></div>
CSS
Cita:
#uno {width: 200px;border-top: 30px solid #f00;border-bottom: 30px solid #f00; border-left: 30px solid #00f;}
Invierto los colores para que veas el efecto, e imagina que pones los bordes superior e inferior blancos.

Supongo que se entenderá bien.
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 11/01/2009, 18:07
Avatar de cluster28  
Fecha de Ingreso: enero-2008
Ubicación: Donostia - San Sebastián
Mensajes: 752
Antigüedad: 9 años, 11 meses
Puntos: 32
Respuesta: Código de un menu ejemplo que no entiendo

Ok, muchas gracias, comprendido. El ejemplo que has puesto lo deja muy claro.
  #4 (permalink)  
Antiguo 12/01/2009, 02:12
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Código de un menu ejemplo que no entiendo

En un principio no lo había cogido... pero probando el ejemplo es un buen recurso...
Gracias Mik!

Aresillo!!
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
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 10:00.