L'inclinaison d'un seul côté d'un élément
Je suis attachant à obtenir un résultat comme cette image :
J'ai essayé ça :
CSS:
#parallelogram-container {
margin: 0 50px;
}
.parallelogram {
background: #008dd0;
width: 200px;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform-origin: 50% 50%;
padding: 0px;
margin: 0 1px;
}
.parallelogram:first-child {
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
background: #ffa008;
color: #FFF;
border: none;
display: inline-block;
height: 90px;
-moz-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
-webkit-transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
transform: scaleX(1) scaleY(1) scaleZ(1) skewX(-20deg);
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
transform-origin: 50% 50%;
padding: 0px;
margin: 0px;
font-weight: 700;
cursor: pointer;
}
HTML:
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
Je ne peut pas réaliser cela, comme l'image : premier parallélogramme pas skrewed sur son côté gauche, et la dernière parallélogramme pas skrewed sur son côté droit.
Quelqu'un peut m'aider s'il vous plaît ?
- Double Possible de CSS3 Transformer l'Inclinaison d'Un Côté
- Voir l'Extrait de code ci-dessous
Vous devez vous connecter pour publier un commentaire.
Voir Extrait De
CSS:
HTML:
Vous pouvez également réaliser cela simplement avec le code suivant. Dans ce cas, une seule div est nécessaire.
À partir de ce point vous pouvez bien sûr affiner tout, mais c'est juste pour vous donner une idée approximative.
HTML
CSS
CSS:
HTML: