45 grados de ángulo + Shadow Box - Usando nada CSS

Question

Necesito volver a crear el siguiente diseño utilizando sólo CSS:

Lo que están viendo en la imagen es la parte superior de un contenedor web - los "enlaces" son parte del menú principal.

En su forma actual, he creado el contenedor, pero no estoy seguro de cómo ir sobre la fabricación de la inclinación de la navegación sin usar una imagen.

Para el registro: Yo prefiero no utilizar una imagen como las posibilidades de la sombra cuadro sobre el sesgo en correspondencia con caja de sombra emitida por el navegador son delgado a ninguno, sobre todo cuando se trata de múltiples navegadores.

Yo estaba pensando en la línea de un div posicionado y girado con un fondo blanco y una sombra caja, pero no he sido capaz de construir todavía.

¿Alguna idea?

Answer 1

Hay algo que se llama Papel de lija que puede ayudarle a transformar sus elementos, incluso en IE!

.myDiv {
    -sand-transform: rotate(45deg);
}

Usted sólo puede conectarlo a su sitio y ya está.

También puede utilizar las transformaciones CSS3, que se le preguntó acerca de su pregunta: "Usando nada CSS"

Para ello tendrá que utilizar:

 .myDiv {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=5); /*for IE*/
}

Y gracias a Josh y Robert por el equivalente Opera:

-o-transform: rotate(45deg);

Internet Explorer caerá ClearType en cualquier texto que tiene un filtro que se le aplica. Pero puede agregar elemento extra vacío en su interior el principal y aplicar el filtro a este elemento adicional. Después de este ClearType no será arruinada y el mismo resultado se puede lograr.

Answer 2

Para la rotación, que está buscando:

-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);

Tenga en cuenta, que la rotación es un atributo CSS 3, por lo que no va a conseguir el mismo comportamiento en todos los navegadores. En lugar de hacer simplemente la inclinación con una imagen, probablemente sería mejor para recrear todo el contorno. Me acerco con:

1. La sección de cabecera, que tendría la inclinación, la sombra, el fondo del menú y el relleno en la parte superior del contenido, más o menos como la captura de pantalla allí.
2. imagen Una que pueden repetir-y hacia abajo todo el cuerpo de contenido con una sombra.
3. La sección de pie de página.

También puede usar bibliotecas externas para intentar atributos CSS3 recrear imágenes, pero puede ser la forma más fácil cuando usted sabe cómo van a hacen.

Answer 3

Creo que se puede utilizar las técnicas de http://nicolasgallagher.com/pure -css-discurso-burbujas / demo /

Este es un muy buen compilación e inspiración para el uso de CSS. Disfrutar.

PS:. Es más seguro que las transformaciones CSS3

Answer 4

La rotación parece innecesario. Me gustaría probar con un efecto de triángulo CSS.

Me voy a asumir sus enlaces están en un ul por lo que su css podría seleccionar ul:before y hacerlo en la forma correcta.

No sé qué va a pasar con el box-shadow pero podría valer la pena un tiro, y probablemente será más fácil de efectuar la alineación en el IE sin recurrir a JavaScript.