4

我想制作一个顶部为 skewY -10deg 底部为 10deg 的形状,以产生如图所示的形状:

div 倾斜底部和顶部

我似乎无法弄清楚如何做到这一点。

4

1 回答 1

1

工作演示

这应该可以解决问题:

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>
于 2013-05-22T22:09:42.453 回答