likes
comments
collection
share

由「对 icon 的思考」到「绘制三角形/扇形」

作者站长头像
站长
· 阅读数 91

背景

在项目中我们往往要使用 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 个梯形，如下图：

由「对 icon 的思考」到「绘制三角形/扇形」

因此，只要把发散点集中成 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 个三角形：

由「对 icon 的思考」到「绘制三角形/扇形」

最后一步，选中你想要的那个三角形，比如尖尖朝上的这个，把其他三个的 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>

我们已经得到了一个三角形，效果如下：

由「对 icon 的思考」到「绘制三角形/扇形」

绘制扇形

绘制扇形非常简单，就是在绘制三角形的基础上，增加一个 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>

效果如下：

由「对 icon 的思考」到「绘制三角形/扇形」

文末

我们已经得到了 1 个三角形和 1 个扇形，通过 transform: scale(xx) 可以把它们缩小，作为 icon 使用。

最后，给大家分享一个 纯CSS 实现 icon 的网站 ---- CSS ICON。

由「对 icon 的思考」到「绘制三角形/扇形」

这个网站展示了很多 icon，点开某个 icon可以查看它的 CSS 实现，鼠标移动到 CSS 代码上可以看到 icon 各个细节的 CSS 实现。

这些 icon 实现得非常优雅，掘友们可以尝试在项目中用一下，对于项目体积优化还是有所帮助的。

转载自:https://juejin.cn/post/7195891149013680188
评论
请登录