web-dev-qa-db-fra.com

Angle de 45 degrés + ombre de boîte - n'utilisant que du CSS

J'ai besoin de recréer le design suivant en utilisant uniquement CSS:

image

Ce que vous voyez dans l'image est le haut d'un conteneur de site Web - les "liens" font partie du menu principal.

En l'état, j'ai créé le conteneur mais je ne sais pas comment faire pour incliner la navigation sans utiliser d'image.

Pour mémoire: je préfère ne pas utiliser une image car les chances que l'ombre de la boîte sur l'inclinaison correspond à l'ombre de la boîte rendue par le navigateur sont minces, en particulier lorsqu'il s'agit de plusieurs navigateurs.

Je pensais dans le sens d'un div positionné et tourné avec un fond blanc et une ombre de boîte, mais je n'ai pas encore pu le construire.

Des idées?

htmlcsscss-shapes
18
Sam

Il y a quelque chose appelé Sandpaper qui peut vous aider à transformer vos éléments, même dans IE!

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

Vous pouvez simplement le brancher sur votre site et vous êtes prêt.

Vous pouvez également utiliser les transformations CSS3, que vous avez demandées dans votre question: "N'utiliser que du CSS".

Pour ce faire, vous utiliseriez:

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

Et merci à Josh et Robert pour l'équivalent Opera:

-o-transform: rotate(45deg);

Internet Explorer supprimera ClearType sur tout texte auquel un filtre est appliqué. Mais vous pouvez ajouter un élément supplémentaire vide à l'intérieur de l'élément principal et appliquer un filtre à cet élément supplémentaire. Après ce ClearType ne sera pas ruiné et le même résultat peut être obtenu.

28
Kyle

Pour la rotation, vous recherchez:

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

Gardez à l'esprit que la rotation est un attribut CSS3, donc vous n'obtiendrez pas le même comportement sur tous les navigateurs. Plutôt que de faire juste l'inclinaison avec une image, il serait probablement préférable de recréer le contour entier. Je l'aborderais avec:

  1. La section d'en-tête, qui aurait l'inclinaison, l'ombre, l'arrière-plan du menu et le remplissage en haut du contenu, un peu comme votre capture d'écran.
  2. Une image qui peut répéter tout le corps du contenu avec une ombre.
  3. La section de pied de page.

Vous pouvez également utiliser des bibliothèques externes pour tenter de recréer des attributs CSS3, mais les images peuvent être le moyen le plus simple, car vous savez comment elles seront rendues.

1
Robert

Je pense que vous pouvez utiliser les techniques de http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

C'est une compilation et une inspiration vraiment sympa pour utiliser CSS. Prendre plaisir.

PS: c'est plus sûr que les transformations CSS3.

1
Dave

La rotation semble inutile. J'essaierais d'utiliser un effet triangle CSS.

Je vais supposer que vos liens sont dans un ul pour que votre CSS puisse sélectionner ul:before et donnez-lui la bonne forme.

Je ne sais pas ce qui va se passer avec le box-shadow mais cela pourrait valoir le coup, et sera probablement plus facile à aligner dans IE sans recourir à JavaScript.

1
zzzzBov