简介
PostCSS 是一款 Node.js 库，可以用来处理 CSS。它利用了 CSS Parser 和 CSS Syntax，让我们可以对 CSS 进行编程式的操作和扩展。postcss-polygon-shapes 是 PostCSS 插件之一，它可以让我们轻松地创建和变形多边形。
安装和配置
如果还没有安装 PostCSS，我们需要先安装它：
npm install postcss -D
接下来安装 postcss-polygon-shapes：
npm install postcss-polygon-shapes -D
在使用 postcss-polygon-shapes 之前，我们需要在 PostCSS 中进行配置。可以在项目根目录下创建一个 postcss.config.js 文件，然后在里面进行配置：
module.exports = {
plugins: [
require('postcss-polygon-shapes')
]
}这个配置告诉 PostCSS 在处理 CSS 时使用 postcss-polygon-shapes 插件。
使用
基本用法
现在我们可以在 CSS 中使用 postcss-polygon-shapes 了。下面是一些基本的用法示例：
-- -------------------- ---- ------- -- ----- -- ------ - -------- -- ---- ---- ----- ------ - -- ----- -- ------ - ------------------ ------------- --------------- ------ -
在 .shape 元素上使用 polygon 属性可以创建一个 4 边形，边的长度分别是 20px，50px，100px 和 150px。使用 polygon-transform 属性可以变形多边形，这个属性接收一个变换函数，可以使用 rotate，translate，scale 等。
示例
下面是一个示例展示了如何使用 postcss-polygon-shapes 创建漂亮的菱形：
-- -------------------- ---- ------- -- -------- -- ------ - --------- --------- ---- ---- ----- ---- ------ ------ ------- ------ ----------- ------- ------------ ------- ----------- ---- ---------- ----------- --- ---- ---- --- ----- -- ----- - -- -------- -- ------------ - ------------------ --------------- -
上述代码中，创建了一个菱形形状，通过 clip-path 属性设置多边形的点坐标，共有四个点，分别用百分比表示其在盒子中的位置。使用 polygon-transform 属性可以在悬停时旋转菱形，这里旋转了 -45 度。
总结
希望通过本篇文章您可以明确使用 postcss-polygon-shapes 的流程，下一次当您需要创建或变形多边形时都能常常拿来使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ac581e8991b448d85d8