仅倾斜元素的一侧 [英] Skew one side only of an element
本文介绍了仅倾斜元素的一侧的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想得到如下图所示的结果:
I'm tying to get a result as this image :
我尝试过:
#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>
我无法像图像那样实现:第一个平行四边形未在其左侧弯曲,最后一个平行四边形未在其右侧弯曲.
I cannot achieve this like the image : first parallelogram not skrewed on his left side and last parallelogram not skrewed on his right side.
有人可以帮我吗?
推荐答案
请参见摘录
#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;
}
<div id="parallelogram-container">
<div class="parallelogram"> </div>
<div class="parallelogram"> </div>
<a class="parallelogram-btn"> </a>
</div>
这篇关于仅倾斜元素的一侧的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文