我想制作一个顶部为 skewY -10deg 底部为 10deg 的形状,以产生如图所示的形状:
我似乎无法弄清楚如何做到这一点。
这应该可以解决问题:
CSS
#test {
width: 200px;
height: 200px;
-webkit-transition: all 300ms ease-in;
background: black;
position: relative;
}
#test:after, #test:before {
display: block;
content: "";
color: transparent;
width: 215px;
height: 50px;
background: white;
position: absolute;
left: -10px;
bottom: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}
#test:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
HTML
<div id="test"></div>