介绍
在前端开发中，有时我们需要将矩形图形切割成有角度的图形。而用 CSS 实现需要用到复杂的 transform、skew 等属性，操作繁琐。npm 包 angled-edges 则可以非常简单地快速实现这种有角度的图形，提高开发效率。
安装
使用 npm 进行安装：
npm install angled-edges
使用
在 HTML 文件中引入 CDN：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/angled-edges/dist/index.css" />
或者在 JavaScript 文件中引入：
import 'angled-edges/dist/index.css'
然后就可以使用了。
基本用法
<div class="angled-edges"></div>
.angled-edges {
--angled-edges-length: 100px;
--angled-edges-angle: 45deg;
--angled-edges-color: #000000;
--angled-edges-background: #ffffff;
}其中：
--angled-edges-length：设置角度长度--angled-edges-angle：设置角度角度--angled-edges-color：设置角度颜色--angled-edges-background：设置角度背景颜色
自定义
可以通过修改 CSS 变量来自定义有角度的图形。
<div class="angled-edges-custom"></div>
.angled-edges-custom {
--angled-edges-length: 80px;
--angled-edges-angle: 75deg;
--angled-edges-color: #ffffff;
--angled-edges-background: #000000;
width: 200px;
height: 240px;
}示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- --------------- --
----- ---------------------------- ----------------- --
----- --------------- ---------------------------- ------------------ --
------------------- ------------
----- ---------------- --------------------------------------------------------------- --
-------
------------- -
---------------------- ------
--------------------- ------
--------------------- --------
-------------------------- --------
------ ------
------- ------
-
-------------------- -
---------------------- -----
--------------------- ------
--------------------- --------
-------------------------- --------
------ ------
------- ------
-
--------
-------
------
---- ------------------- ------------
---- ----------------------------------
-------
-------总结
在前端开发中，我们常常需要实现特殊的图形效果。npm 包 angled-edges 可以快速、简单地实现有角度的矩形图形，提高开发效率。同时，我们可以通过修改 CSS 变量来自定义有角度的图形。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056b5781e8991b448e5507