我尝试了这个:
#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>
我无法像图片一样实现这个效果:第一个平行四边形没有向左倾斜,最后一个平行四边形没有向右倾斜。
有人能帮帮我吗?