css画出一个平行四边形

522 阅读1分钟

1、今天碰到一个用css画出一个平行四边形

image.png

关键代码:

transform: skew(-25deg);

由于skew会带动其中的子元素一起倾斜,我们需要在内容区外面再放一个div,设置相反的度数,抵消掉倾斜效果

transform: skew(25deg);

边框弧度

border-radius: 3px;