45 degrés Angle + Shadow Box - En utilisant rien CSS

Question

J'ai besoin de recréer la conception suivante en utilisant uniquement CSS:

Qu'est-ce que vous voyez dans l'image est la partie supérieure d'un conteneur de site - les « liens » font partie du menu principal.

En l'état actuel, je l'ai créé le conteneur, mais je ne suis pas sûr de savoir comment s'y prendre pour faire l'inclinaison sur la navigation sans utiliser une image.

Pour mémoire: Je préfère ne pas utiliser une image comme les chances de l'ombre de la boîte sur la pente correspondant avec l'ombre de la boîte rendu par le navigateur sont minces à aucun, surtout quand il s'agit de plusieurs navigateurs.

Je pensais le long des lignes d'un div positionné et mis en rotation avec un fond blanc et une ombre de la boîte, mais je ne l'ai pas été en mesure de construire encore.

Toutes les idées?

Answer 1

Il y a quelque chose appelé Poncer 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 ensemble.

Vous pouvez également utiliser des transformations CSS3, qui vous a demandé dans votre question: « Utilisation de rien d'autre que CSS. »

Pour ce faire, vous pouvez utiliser:

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

Et grâce à Josh et Robert pour l'équivalent opéra:

-o-transform: rotate(45deg);

Internet Explorer baissera ClearType sur un texte qui a un filtre appliqué. Mais vous pouvez ajouter vide élément supplémentaire à l'intérieur du principal et appliquer le filtre à cet élément supplémentaire. Après cette ClearType ne sera pas ruinée et le même résultat peut être atteint.

Answer 2

Pour la rotation, vous êtes à la recherche:

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

Gardez à l'esprit que la rotation est un attribut CSS3, de sorte que vous n'allez pas obtenir le même comportement dans tous les navigateurs. Plutôt que de faire juste la pente avec une image, il serait probablement préférable de recréer l'ensemble les grandes lignes. Je l'aborde avec:

1. La section d'en-tête, qui aurait la pente, l'ombre, l'arrière-plan du menu et le rembourrage en haut du contenu, un peu comme la capture d'écran il.
2. Une image qui peut repeat-y sur le corps entier 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 les attributs CSS3, mais les images peuvent être la meilleure façon que vous savez comment ils vont rendre.

Answer 3

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

Ceci est une compilation très agréable et d'inspiration pour l'utilisation de CSS. Profitez.

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

Answer 4

La rotation ne semble pas nécessaire. Je voudrais essayer d'utiliser un effet de triangle CSS.

Je vais supposer que vos liens sont en ul afin que votre css pourrait choisir ul:before et d'en faire la forme correcte.

Je ne sais pas ce qui se passera avec le box-shadow mais il est peut-être vaut le coup, et sera probablement plus facile d'aligner dans IE sans avoir recours à JavaScript.