CSS实现图标样式思路+总结

最近需要利用纯CSS来实现各种图标样式，发现这是一件挺有意思的事情，总结如下，与君共勉。

前言

首先，利用CSS绘图，需要对CSS有一个基础的认识，可以参照《W3school_css教程》。

总结

其实，CSS绘图与我们平常画图有着相似之处。首先需要分析所绘图形可以拆分成由哪些简单的图形组成。如果不能拆分，那就考虑考虑可以由哪些所熟悉的图形改变而成。总而言之，就是需要将一个复杂的图标简化成我们所熟悉的。当然对于一些比较常用的图标，我们需要清楚绘制原理，例如圆、三角形等，很多复杂的图标都是利用简单的图标组合而成。本次所绘制的图标，涉及的css知识点主要有一下几点：

• width、height：这是最基础的属性，设置图标的宽高
• background-color：给所绘图标设置背景颜色
• border：设置图标的边框样式
• border-radius：给边框设置圆角样式
• position：位置中的相对定位(relative)和绝对定位(absolute)在绘制组合图标是非常有用
• ::after、::before：伪元素也是常用的一个知识点，例如常用的气泡聊天框，就是利用伪元素+定位绘制而成
• 2D转换的rotate()方法：当所绘制图标有方向要求时，利用2d转换是一个不错的选择，例如绘制斜线

以上只是比较重要且常用的一部分知识点，其实，在实际绘图中所需要的可能不止这些，这需要依实际情况而定。

例子

<template>
    <div style="display: flex">
        <div class="listItem">
            <!-- 箭头 -->
            <div class="box-style"></div> 
        </div> 
        <div class="listItem">
             <!-- 圆 + 三角 -->
            <div class="circle-box">
                <div class="triangle-box"></div>
            </div>
        </div> 
        <div class="listItem">
            <!-- 四分之一弧形 -->
            <div class="arc"></div>
        </div>
        <div class="listItem">
            <!-- 箭头直线 -->
            <div class="arrow-line"></div>
        </div>
        <div class="listItem">