那矩形怎么变成平行四边形呢？就拿一个铁丝做的矩形举例，怎么变成平行四边形？有人回答：很简单啊，扭曲一下不就好了。对了，就是扭曲，transform的skew属性。
transform: skew(-10deg);
诶，这时有人问了，没有斜向上呀？怎么破，别急，看：
transform: skew(-10deg) rotate(-8deg)
好了，差不多了吧，可是还有个三角形呢，来，上图：
利用width:0;height: 0
代码如下：
三角形代码
为什么要用before伪元素呢？你懂得，方便布局，这里很巧妙的运用了width和height均为0，利用border的颜色和位置进行设置，包括平时看到的大部分多边形，差不多都是这个原理。最终代码如下：
作为css探索者，试试设置不同的border，结合transform，看看有何巧妙的效果，五角星，八边形……手到擒来，向多边形的世界出击吧。
推荐学习：《css视频教程》
以上就是css怎么实现多边形的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
