css魔法系列(7)之平行四边形

原创 雨花茶 随笔 css 210阅读 2017-05-24 12:48:29 举报

实现平行四边形原理是利用####transform:skewx();倾斜。
外层容器倾斜45deg变成了四边形,但是里面的内容也会随着倾斜45deg,我们可以用一个块级元素包住内容,
对这个元素反倾斜-45deg,内容变回来了。也就是嵌套方案原理。第2中伪元素方案是利用伪元素替代包裹的元素实现。
嵌套元素方案:
html 代码

伪元素方案:
html 代码

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复