npm 包 postcss-polygon-shapes 使用教程

阅读时长 3 分钟读完

简介

PostCSS 是一款 Node.js 库,可以用来处理 CSS。它利用了 CSS Parser 和 CSS Syntax,让我们可以对 CSS 进行编程式的操作和扩展。postcss-polygon-shapes 是 PostCSS 插件之一,它可以让我们轻松地创建和变形多边形。

安装和配置

如果还没有安装 PostCSS,我们需要先安装它:

接下来安装 postcss-polygon-shapes:

在使用 postcss-polygon-shapes 之前,我们需要在 PostCSS 中进行配置。可以在项目根目录下创建一个 postcss.config.js 文件,然后在里面进行配置:

这个配置告诉 PostCSS 在处理 CSS 时使用 postcss-polygon-shapes 插件。

使用

基本用法

现在我们可以在 CSS 中使用 postcss-polygon-shapes 了。下面是一些基本的用法示例:

-- -------------------- ---- -------
-- ----- --
------ -
  -------- -- ---- ---- ----- ------
-

-- ----- --
------ -
  ------------------ ------------- --------------- ------
-

.shape 元素上使用 polygon 属性可以创建一个 4 边形,边的长度分别是 20px,50px,100px 和 150px。使用 polygon-transform 属性可以变形多边形,这个属性接收一个变换函数,可以使用 rotatetranslatescale 等。

示例

下面是一个示例展示了如何使用 postcss-polygon-shapes 创建漂亮的菱形:

-- -------------------- ---- -------
-- -------- --
------ -
  --------- ---------
  ---- ----
  ----- ----
  ------ ------
  ------- ------
  ----------- -------
  ------------ -------
  ----------- ----
  ---------- ----------- --- ---- ---- --- ----- -- -----
-

-- -------- --
------------ -
  ------------------ ---------------
-

上述代码中,创建了一个菱形形状,通过 clip-path 属性设置多边形的点坐标,共有四个点,分别用百分比表示其在盒子中的位置。使用 polygon-transform 属性可以在悬停时旋转菱形,这里旋转了 -45 度。

总结

希望通过本篇文章您可以明确使用 postcss-polygon-shapes 的流程,下一次当您需要创建或变形多边形时都能常常拿来使用。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60055ac581e8991b448d85d8

纠错
反馈