我想要得到这个图像的结果：
我试过了：
#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;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
我不能像图像那样实现这一点：第一个平行四边形没有画在他的左侧,而最后一个平行四边形没有画在他的右侧.
有谁可以帮助我吗 ？
解决方法
请参阅代码段
#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);
}
.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);
}
.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;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
