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

Question

que necesito para 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.

Tal como está, he creado el contenedor, pero no estoy seguro de cómo hacer la inclinación en la navegación sin usar una imagen.

Para el registro: Prefiero no usar una imagen ya que las posibilidades de que la sombra de la caja en la inclinación coincida con la sombra de la caja renderizada por el navegador son delgadas, especialmente cuando se trata de múltiples navegadores.

Estaba pensando en las líneas de un div posicionado y girado con un fondo blanco y una sombra de cuadro, pero no he podido construirlo todavía.

¿Alguna idea?

Answer 1

Hay algo llamado Sandpaper que puede ayudarte a transformar tus elementos, ¡incluso en IE!

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

Puede simplemente conectarlo a su sitio y está configurado.

También puede usar las transformaciones CSS3, que le preguntó acerca de su pregunta: "Usar nada más que 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 para la ópera equivalente:

-o-transform: rotate(45deg); 

Internet Explorer caerá ClearType en cualquier texto que tiene aplicado un filtro lo. Pero puede agregar un elemento extra vacío dentro del principal y aplicar filtro a este elemento adicional. Después de este ClearType no se arruinará y se podrá lograr el mismo resultado.

Answer 2

Para la rotación, que está buscando:

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

tener 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 solo la inclinación con una imagen, probablemente sería mejor recrear el contorno completo. Lo abordaría con:

1. La sección del encabezado, 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 su captura de pantalla allí.
2. Una imagen que puede repetirse-y en todo el contenido con una sombra.
3. La sección del pie de página.

También puede usar bibliotecas externas para intentar recrear los atributos de CSS3, pero las imágenes pueden ser la forma más fácil ya que sabe cómo se procesarán.

Answer 3

creo que se pueden utilizar las técnicas de http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

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

PD: es más seguro que las transformaciones de CSS3.

Answer 4

La rotación parece innecesaria. Yo trataría de usar un efecto de triángulo CSS.

Voy a asumir que sus enlaces están en un ul para que su CSS pueda seleccionar ul:before y hacerlo en la forma correcta.

No sé qué pasará con el box-shadow, pero podría valer la pena intentarlo, y probablemente será más fácil alinearlo en IE sin recurrir a JavaScript.