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">
            <!-- 字母p -->
            <div class="p"></div>
        </div>
        <div class="listItem">
            <!-- 泪滴形 -->
            <div class="ring"></div>
        </div>
        <div class="listItem">
            <!-- 空心圆 -->
            <div class="circle-empty"></div>
        </div>
        <div class="listItem">
            <!-- 实心圆 -->
            <div class="circle-solid"></div>
        </div>
        <div class="listItem">
            <!-- 矩形 -->
            <div class="rectangle"></div>
        </div>
        <div class="listItem">
            <!-- 方向标志 -->
            <div class="ddd"></div>
        </div>
        <div class="listItem">
            <!-- 画图例 -->
            <div>
                <di class="boxItems">
                    <div class="left firstColor"></div>
                    <div>堵塞</div>
                </di>
                 <di class="boxItems">
                    <div class="left secondColor"></div>
                    <div>拥挤</div>
                </di>
                 <di class="boxItems">
                    <div class="left thirdColor"></div>
                    <div>畅通</div>
                </di>
            </div>
        </div>
        <div class="listItem">
            <!-- 斜线 -->
            <div class="slashLeft"></div>
        </div>
        <div class="listItem">
            <!-- 三角 -->
            <div class="sanjiao"></div>
        </div>
    </div>
</template>

<script>
export default {
 
}
</script>

<style>
.listItem {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* text-align: center; */
}
/* 箭头 */
.box-style {
    position: relative;
    width: 40px;
    /* height和border的值一样 */
    height: 20px;
    display: inline-block;
    margin: 20px;
    background: yellowgreen;
    /* 水平旋转 */
    transform: rotate(90deg); /* 标准语法 */
}
.box-style::after {
    content: '';
    position: absolute;
    left: 40px; 
    top: -10px;
    border: 20px solid transparent;
    border-left-color: yellowgreen;
}
/* 圆+三角形 */
.circle-box {
    width: 40px;
    height: 40px;
    border: 4px solid tomato;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.triangle-box {
    width: 0;
    height: 0;
    /* 10* 0.575 = 10.35 */
    border-left: 11.5px solid transparent;
    border-right: 11.5px solid transparent;
    border-bottom: 20px solid tomato;
}
/* 弧形 */
.arc {
    width: 40px;
    height: 40px;
    border: 10px solid greenyellow;
    border-radius: 0 100% 0 0;
    border-bottom: none;
    border-left: none;
    transform: rotate(90deg);
}
/* 箭头直线 */
.arrow-line {
    position: relative;
    width: 50px;
    height: 20px;
    background: tomato;
    
}
.arrow-line::after {
    content: '';
    position: absolute;
    right: -20px;
    border: 10px solid transparent;
    border-left-color: tomato;

}
/* 字母P */
.p{ 
    width: 50px;
    position: relative;
    height: 55px;
    border-left: 10px solid orange;
}
.p::before{
    position: absolute;
    content: '';
    width: 20px;
    height: 10px;
    border-width: 10px 10px 10px 0;
    border-color:orange;
    border-style: solid;
    border-radius: 0 50% 50% 0;
}
/* 泪滴形 */
.ring {
    width: 40px;
    height: 40px;
    border: 5px solid tomato;
    border-radius: 50% 50% 50% 0;
    transform: rotate(90deg);
}
/* 空心圆 */
.circle-empty {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid tomato;
}
/* 实心圆 */
.circle-solid {
    width:40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: tomato;
}
/* 矩形 */
.rectangle {
    width: 40px;
    height: 40px;
    background-color: tomato;
    opacity: 1;
}
/* 画方向标志 */
.ddd {
    width: 0px;
    height: 0px;
    position: relative;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 60px solid tomato;
}
.ddd::after {
    content: '';
    width: 0px;
    height: 0px;
    position: absolute;
    left: -20px;
    top: 20px;
    border: 20px solid transparent;
    border-bottom-color: #fff;  
}
/* 图图例 */
.boxItems {
    display: flex;
    align-items: center;
    color: tomato;
    font-size: 14px;
    font-weight: bold;
}
.left {
    width: 30px;
    height: 12px;
    margin-right: 5px;
}
.firstColor {
    background: red;
}
.secondColor {
    background: yellow
}
.thirdColor {
    background: #1afa29
}
/* 斜线 */
.slashLeft {
    width: 50px;
    height: 10px;
    background: tomato;
    transform: rotate(45deg);
    transform-origin:10% 10%;
}
/* 三角 */
.sanjiao {
    border: 20px solid transparent;
    border-bottom-color: orange ;
}
</style>

效果