Je suis en train de créer un conteneur pour mon site web et l'avoir légèrement incliné sur le fond comme ceci:Div avec un fond incliné
Est-ce que quelqu'un sait comment faire cela? J'ai essayé transform: skewy(-10deg); mais il fait aussi le top que j'essaye de ne pas faire.
HTML
<div class="slanted">HI</div>
CSS
.slanted {
background-color:red;
height:500px;
}
J'ai répondu à ma propre question. Je voulais juste que le haut et le bas ne soient pas inclinés, donc j'ai ajouté une marge négative.
* {
margin: 0;
height: 0;
}
.first {
margin-top: -45px;
}
.slanted {
height: 500px;
-webkit-transform: skewy(-3deg);
transform: skewy(-3deg);
}
footer {
position: relative;
margin-top: -45px;
height: 150px;
background-color: #bdc3c7;
}<section class="slant-container">
<div class="slanted first" style="background-color:#2ecc71;"></div>
<div class="slanted" style="background-color:#3498db;"></div>
<div class="slanted" style="background-color:#f39c12;"></div>
</section>
<footer></footer>HTML
<div class="slanted">HI</div>
CSS
.slanted {
background-color:red;
height:500px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 96%, 0 100%);
}
CodePen
http://codepen.io/anthonyastige/pen/PzWvqo
Référence
cf. ci-dessous extrait, cela pourrait e \ vous être utile:
<!DOCTYPE html>
<html>
<head>
<style>
.updatedDiv {
border-top-color: transparent;
border-right-color: rgb(7, 133, 214);
border-top-width: 59px;
border-right-width: 110px;
border-top-style: solid;
border-right-style: solid;
}
</style>
</head>
<body>
<div class="updatedDiv"></div>
</body>
</html>
cela ne fonctionne pas avec le contenu - http://codepen.io/anthonyastige/pen/YWNbqb –
nous pouvons avoir deux div. un pour montrer div divisée et un autre pour le contenu – Vipul
Pouvez-vous fournir plus de contexte? S'il n'y a pas de contenu et que vous avez juste besoin de la couleur, vous pouvez faire pivoter l'élément coloré et appliquer 'overflow: hidden' à l'élément parent. – Paul
Copie possible de [Fond d'écran bicolore divisé par ligne diagonale en utilisant css] (http://stackoverflow.com/questions/14739162/two-tone-background-split-by-diagonal-line-using-css) – BSMP