Comment biaiser divs avec css

J'ai div et je me demande comment je peux incliner/incliner le bas et le côté droit légèrement.

Je peux créer des triangles, et biaiser tous les côtés, je ne sais pas comment biaiser DEUX côtés.

Est-ce possible? Merci.

0
ajouté édité
Vues: 1
Vous devez nous montrer du code que vous avez essayé.
ajouté l'auteur Ally, source

2 Réponses

Vous pourrez peut-être le faire en utilisant les sélecteurs CSS : before et : after . Je viens de fouetter un exemple approximatif.

JSFiddle

HTML:

<div class="slanted"></div>

CSS:

.slanted {
    position: relative;
    height: 200px;
    width: 380px;
    min-width: 380px;
    max-width: 380px;
    background: #000;
}

.slanted:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-right: 180px solid #000;
    border-top: 100px solid #000;
    border-bottom: 100px solid #fff; /* page background color */
}

.slanted:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-left: 200px solid #000;
    border-bottom: 200px solid #fff; /* page background color */
}
3
ajouté

Dans les nouveaux navigateurs, vous pouvez utiliser des transformations CSS.

Ce code faussera un div:

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);

The result will look something like this: enter image description here

JSFiddle

Le réseau de développeurs Mozilla a un article qui en dit plus sur le différentes transformations que vous pouvez appliquer. Il contient également plusieurs exemples et détails sur la compatibilité du navigateur .

0
ajouté