本文摘自PHP中文网，作者藏色散人，侵删。
css实现多边形的方法：首先创建一个HTML示例文件；然后通过transform的skew属性实现平行四边形；接着用before伪元素实现三角形；最后结合平行四边行和三角形实现多边形即可。
本文操作环境：windows7系统、HTML5&&CSS3版，DELL G3电脑
CSS | 实现有趣的多边形
前端开发路漫漫，在行走web世界的路途中，我们肯定有遇到多边形的设计，最简单的方法莫过于直接上图片走起，作为一个有“追求”的前端，当然是要“自虐”了……今天我们就来说说前端编程怎么实现多边形，先上一张图，乃们可以先想想怎么实现。
效果图
“咋实现咋实现”，“有文字斜体向上么”，“word天，还是直接给我img吧，感觉好麻烦”。放轻松，深呼吸，跟着我，一起看css如何打磨。
这个类似标签的多边形，我们可以看成平行四边行和立三角形的结合，先上一个矩形：
简单的width，height
相关阅读 >>
css border-top-right-radius属性怎么用
更多相关阅读请进入《css》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
