L'inclinaison d'un seul côté d'un élément

Je suis attachant à obtenir un résultat comme cette image : L'inclinaison d'un seul côté d'un élément

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">&nbsp;</div>
<div class="parallelogram">&nbsp;</div>
<a class="parallelogram-btn">&nbsp;</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

InformationsquelleAutor user3405644 | 2016-11-25

Voir Extrait De

CSS:

   
#parallelogram-container {
margin: 0 50px;
}
.parallelogram{
position:relative;
background: #008dd0;
width:100px;
border:none;
display:inline-block;
height:90px;
padding:0px;
margin:0 1px;
}
.parallelogram:nth-child(1){
}
.parallelogram:nth-child(2){
transform-origin: bottom left;
-ms-transform: skew(-28deg,0deg);
-webkit-transform: skew(-28deg,0deg);
transform: skew(-28deg,0deg);
margin-left:1px;
}
.parallelogram:nth-child(1):after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background:#008dd0;
transform-origin:bottom left;
-ms-transform: skew(-28deg,0deg);
-webkit-transform: skew(-28deg,0deg);
transform: skew(-28deg,0deg);
}
.parallelogram-btn:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
left: -51px;
z-index: -1;
background: #ffa008;
transform-origin: bottom left;
-ms-transform: skew(-28deg,0deg);
-webkit-transform: skew(-28deg,0deg);
transform: skew(-28deg,0deg);
}
.parallelogram:first-child {
border-bottom-left-radius:5px;
border-top-left-radius: 5px;
}
.parallelogram-btn {
width: 60px;
position:relative;
background:#ffa008;
color:#FFF;
border: none;
display:inline-block;
height:90px;
border-bottom-right-radius:5px;
border-top-right-radius:5px;
padding:0px;
margin-left:51px;
font-weight:700;
cursor:pointer;
}

HTML:

   
<div id="parallelogram-container">
<div class="parallelogram">&nbsp;</div>
<div class="parallelogram">&nbsp;</div>
<a class="parallelogram-btn">&nbsp;</a>
</div>

Un gentil mec.. !
Tout simplement génial ! Merci beaucoup !
merci & Bienvenue
Fonctionne encore à ce jour ;3
c'est vraiment vraiment sympa

InformationsquelleAutor Ayatullah Rahmani

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

<div class="box"></div>

CSS

.box{
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after{
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before{
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}

CSS:

.box {
width: 400px;
height: 100px;
background: #008dd0;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.box:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 30%;
height: 100%;
background: #ffa008;
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) skew(-10deg);
width: 40%;
height: 100%;
background: #008dd0;
border: 2px solid white;
border-width: 0 8px;
z-index: 100;
}

HTML:

<div class="box"></div>

Très cool, merci !

InformationsquelleAutor SvenL

Vous devez vous connecter pour publier un commentaire.