简介
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