Bords inclinés haut et bas

Question

Je suis confronté au problème suivant avec mon div incliné du haut et du bas. Ce devrait être quelque chose comme sur la photo que je fournis ici. Je veux utiliser before pseudo élément pour la partie supérieure de la div et after pour la partie inférieure de la div et le fond est un peu de travail, mais j'ai seulement un problème avec le haut. Des idées comment je peux accomplir cet effet en utilisant mon code?

Je veux qu'il ressemble à ceci:

Voici ce que j'ai jusqu'à présent:

.example { 
 
    width: 100%; 
 
    height: 700px; 
 
    position: relative; 
 
    background: red; 
 
} 
 

 
.example:after { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: inherit; 
 
    z-index: -1; 
 
    bottom: 0; 
 
    transform-origin: left bottom; 
 
    transform: skewY(-10deg); 
 
} 
 

 
.example:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background: inherit; 
 
    z-index: -1; 
 
    top: 0; 
 
    transform-origin: top left; 
 
    transform: skewY(5deg); 
 
}

<div class="example"> 
 
    <h1>SOME CONTENT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p> 
 
    <h2>More Content</h2> 
 
</div>

View on JSFiddle

Answer 1

Le problème que vous rencontrez est dû au réglage position:absolute des pseudo-éléments (avant/après). Lorsque vous définissez la position sur absolu, l'élément n'a plus de limites de conteneur à respecter et est positionné en fonction des valeurs gauche, droite, supérieure et inférieure du corps html. La position div de votre exemple de conteneur principal commence par le haut et votre pseudo-élément after doit être un peu au-dessus pour afficher l'arrière-plan incliné, mais le pseudo-élément n'est pas un élément de bloc pour déplacer le div principal à son réglage position:absolute. Vous devez ajouter une marge supérieure pour déplacer la div principale afin que le pseudo-élément placé au-dessus soit affiché.

Voici une autre façon de le faire en utilisant les propriétés de la bordure css au lieu de la propriété css3 transform.

https://codepen.io/Nasir_T/pen/GNKLNQ

espère que cela vous explique la raison de l'utilisation des marges pour ajuster les pseudo-éléments positionnés absolus.

Answer 2

J'ai ajouté une 150px de marge au-dessus de vous div

EDIT J'ai aussi changé le degré d'inclinaison de -5% et 5% au lieu de + -10%

.example { 
    width: 100%; 
    h height: 700px; 
    position: relative; 
    background: red; 
    margin-top: 150px; 
} 

.example:after { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: inherit; 
    z-index: -1; 
    bottom: 0; 
    transform-origin: left bottom; 
    transform: skewY(-5deg); 
} 

.example:before { 
    content: ""; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: inherit; 
    z-index: -1; 
    top: 0; 
    transform-origin: top left; 
    transform: skewY(5deg); 
} 

Answer 3

Je pense que ce d être plus facile d'incliner les divs blancs en :before et :after puis d'utiliser z-index pour amener votre contenu au premier plan comme ça. Également ajouté un margin-top à h1 qui peut être ajusté au besoin.

.example { 
 
    width: 100%; 
 
    height: 700px; 
 
    position: relative; 
 
    background: red; 
 
    overflow: hidden; 
 
} 
 
.example:after { 
 
    content: ""; 
 
    width: 110%; 
 
    height: 25%; 
 
    top: 0; 
 
    position: absolute; 
 
    background: white; 
 
    z-index: 1; 
 
    transform-origin: left bottom; 
 
    transform: skewY(-5deg); 
 
} 
 

 
.example:before { 
 
    content: ""; 
 
    width: 110%; 
 
    height: 25%; 
 
    bottom: 0; 
 
    position: absolute; 
 
    background: white; 
 
    z-index: 1; 
 
    transform-origin: left bottom; 
 
    transform: skewY(5deg); 
 
} 
 

 
.example h1, .example p { 
 
    position: relative; 
 
    z-index: 5; 
 
} 
 

 
.example h1 { 
 
    margin-top: 205px; 
 
}

<div class="example"> 
 
    <h1>SOME CONTENT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p> 
 
    <h2>More Content</h2> 
 
</div>

Answer 4

IF il y a une largeur statique, l'effet est beaucoup plus facile de créer & contrôle en utilisant les frontières:

.example { 
 
    width: 500px; 
 
    height: 700px; 
 
    position: relative; 
 
    background: red; 
 
    padding:100px 0px; 
 
} 
 
.example:after, 
 
.example:before { 
 
    content:''; 
 
    position:absolute; 
 
    border-right:solid 500px transparent; 
 
} 
 
.example:before { 
 
    top:0px; 
 
    border-top:solid 100px #FFF; 
 
} 
 
.example:after { 
 
    bottom:0px; 
 
    border-bottom:solid 100px #FFF; 
 
} 
 

<div class="example"> 
 
    <h1>SOME CONTENT</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur 
 
    adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p> 
 
    <h2>More Content</h2> 
 
</div>