我正在尝试在 css 中创建一个带有直右侧的平行四边形，但到目前为止我正在努力实现这一目标。
我正在使用CSS...
-webkit-transform: skew(-18deg);
-moz-transform: skew(-18deg);
-o-transform: skew(-18deg);
...“倾斜”矩形以创建平行四边形。
我想知道右侧是否可以变直？
css 中是否需要 :before 和 :after ？
对此的任何帮助都会很棒。
Thanks,
Phil
您可以通过添加三角形元素并将其放置在矩形元素旁边来实现此目的。
选项1：（使用边界黑客）
在下面的示例中，我为三角形添加了蓝色，只是为了说明如何实现该形状。请替换下面一行中的颜色，以获得一侧有斜边、另一侧有直边的平行四边形。
更改以下内容
border-color: transparent blue blue transparent;
to
border-color: transparent red red transparent;
Note:使用此方法时，很难向形状添加额外的外边框。
Snippet:
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: red;
margin-left: 50px;
color: white;
}
.trapezoid:after{
position: absolute;
content: '';
left: -50px;
top: 0px;
border-style: solid;
border-color: blue transparent blue transparent;
border-width: 100px 0px 0px 50px;
}
<div class="trapezoid">Some dummy text</div>
选项2： (Using skew)
.trapezoid{
position: relative;
height: 100px;
width: 100px;
background: beige;
border: 1px solid red;
border-left-width: 0px;
margin-left: 50px;
}
.trapezoid:before{
position: absolute;
content: '';
left: -25px;
top: -1px;
height: 100px;
width: 50px;
background: beige;
border: 1px solid red;
z-index: -1;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
transform: skew(20deg);
}
<div class="trapezoid">Some dummy text.</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
