开启AdminJS成长之旅！这是我参与「AdminJS · 2 月更文挑战」的第 3 天，点击查看活动详情
背景
在项目中我们往往要使用 icon 图标来美化界面，为了快速响应需求，笔者一直以来都是用 iconfont 或者 fontawesome 这样的库来实现。
但是，引入这些三方库会大大增加项目体积，事实上，对于一些非常简单的形状，如 三角形/扇形，用纯 CSS 完全可以实现，从而达到减少体积，提升性能的目的。
本文就来详细聊聊如何实现 三角形/扇形 这 2 种简单形状，实现以后，可以通过 transform: scale(xx) 等方法缩小，然后作为 icon 使用。
绘制三角形
在 CSS 中，border 属性是沿着 盒模型 的 4 个顶点往外延伸，形成 4 个梯形。
如下面这个小DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border是梯形</title>
<style>
div {
width: 50px;
height: 50px;
padding: 10px;
background-color: black;
border-top: 100px solid lightblue;
border-left: 100px solid lightgreen;
border-right: 100px solid lightseagreen;
border-bottom: 100px solid lightcoral;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
黑色部分是 div 的 Padding Box + Content Box，外面是 Border Box，由于是从 div 的 4 个顶点延伸出去的，视觉效果就是 4 个梯形，如下图：
因此，只要把发散点集中成 1 个点，4 个梯形就会变成 4 个三角形。
要做到这一点，就要把 div 的 Padding Box 和 Content Box 都从视觉上移除，这只需将 div 的 padding 和 width/height 都设置为 0 即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border是梯形</title>
<style>
div {
width: 0;
height: 0;
padding: 0;
background-color: black;
border-top: 100px solid lightblue;
border-left: 100px solid lightgreen;
border-right: 100px solid lightseagreen;
border-bottom: 100px solid lightcoral;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下，我们得到了 4 个三角形：
最后一步，选中你想要的那个三角形，比如尖尖朝上的这个，把其他三个的 border-color 设置成 透明 即可。
笔者在上文中为了说明问题把 div 也加了背景色，这里可以去掉了，最终代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border是梯形</title>
<style>
div {
width: 0;
height: 0;
padding: 0;
background-color: transparent;
border-top: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid lightcoral;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
我们已经得到了一个三角形，效果如下：
绘制扇形
绘制扇形非常简单，就是在绘制三角形的基础上，增加一个 border-radius: 50% 的属性配置，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基于三角形来绘制扇形</title>
<style>
div {
width: 0;
height: 0;
padding: 0;
background-color: transparent;
border-top: 100px solid transparent;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid lightcoral;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如下：
文末
我们已经得到了 1 个三角形和 1 个扇形，通过 transform: scale(xx) 可以把它们缩小，作为 icon 使用。
最后，给大家分享一个 纯CSS 实现 icon 的网站 ---- CSS ICON。
这个网站展示了很多 icon，点开某个 icon可以查看它的 CSS 实现，鼠标移动到 CSS 代码上可以看到 icon 各个细节的 CSS 实现。
这些 icon 实现得非常优雅，掘友们可以尝试在项目中用一下，对于项目体积优化还是有所帮助的。