Recently, we need to use pure CSS to realize various icon styles. I find it very interesting. To sum up, I encourage you.

preface

First of all, drawing with CSS requires a basic understanding of CSS, which can be referred to W3school_css tutorial.

summary

In fact, CSS drawing is similar to our usual drawing. First, we need to analyze which simple graphics can be divided into. If it cannot be split, consider which familiar graphics can be changed. In short, we need to simplify a complex icon into something we are familiar with. Of course, for some commonly used icons, we need to understand the drawing principle, such as circles and triangles. Many complex icons are composed of simple icons. The CSS knowledge points involved in the icons drawn this time mainly include the following:

• Width, height: This is the most basic attribute, which sets the width and height of the icon
• Background color: sets the background color for the painted icon
• Border: sets the border style of the icon
• Border radius: sets the fillet style for the border
• Position: relative and absolute positioning in position are very useful in drawing composite icons
• :: after,:: before: pseudo element is also a common knowledge point. For example, the commonly used bubble chat box is drawn by using pseudo element + positioning
• rotate() method of 2D conversion: when the drawn icon has direction requirements, 2D conversion is a good choice, such as drawing slashes

The above are only some important and commonly used knowledge points. In fact, more than these may be needed in actual drawing, which needs to be determined according to the actual situation.

example

<template>
    <div style="display: flex">
        <div class="listItem">
            <!-- arrow -->
            <div class="box-style"></div> 
        </div> 
        <div class="listItem">
             <!-- circular + triangle -->
            <div class="circle-box">
                <div class="triangle-box"></div>
            </div>
        </div> 
        <div class="listItem">
            <!-- Quarter arc -->
            <div class="arc"></div>
        </div>
        <div class="listItem">
            <!-- Arrow line -->
            <div class="arrow-line"></div>
        </div>
        <div class="listItem">
            <!-- letter p -->
            <div class="p"></div>
        </div>
        <div class="listItem">
            <!-- Teardrop shape -->
            <div class="ring"></div>
        </div>
        <div class="listItem">
            <!-- Hollow circle -->
            <div class="circle-empty"></div>
        </div>
        <div class="listItem">
            <!-- disc  -->
            <div class="circle-solid"></div>
        </div>
        <div class="listItem">
            <!-- rectangle -->
            <div class="rectangle"></div>
        </div>
        <div class="listItem">
            <!-- Direction sign -->
            <div class="ddd"></div>
        </div>
        <div class="listItem">
            <!-- Draw legend -->
            <div>
                <di class="boxItems">
                    <div class="left firstColor"></div>
                    <div>blocking</div>
                </di>
                 <di class="boxItems">
                    <div class="left secondColor"></div>
                    <div>Crowding</div>
                </di>
                 <di class="boxItems">
                    <div class="left thirdColor"></div>
                    <div>open</div>
                </di>
            </div>
        </div>
        <div class="listItem">
            <!-- Slash -->
            <div class="slashLeft"></div>
        </div>
        <div class="listItem">
            <!-- triangle -->
            <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; */
}
/* arrow */
.box-style {
    position: relative;
    width: 40px;
    /* height Same value as border */
    height: 20px;
    display: inline-block;
    margin: 20px;
    background: yellowgreen;
    /* Horizontal rotation */
    transform: rotate(90deg); /* Standard grammar */
}
.box-style::after {
    content: '';
    position: absolute;
    left: 40px; 
    top: -10px;
    border: 20px solid transparent;
    border-left-color: yellowgreen;
}
/* Circle + triangle */
.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 */
.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 */
.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;

}
/* Letter 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;
}
/* Teardrop shape */
.ring {
    width: 40px;
    height: 40px;
    border: 5px solid tomato;
    border-radius: 50% 50% 50% 0;
    transform: rotate(90deg);
}
/* Hollow circle */
.circle-empty {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid tomato;
}
/* disc  */
.circle-solid {
    width:40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: tomato;
}
/* rectangle */
.rectangle {
    width: 40px;
    height: 40px;
    background-color: tomato;
    opacity: 1;
}
/* Draw direction sign */
.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;  
}
/* Figure legend */
.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
}
/* Slash */
.slashLeft {
    width: 50px;
    height: 10px;
    background: tomato;
    transform: rotate(45deg);
    transform-origin:10% 10%;
}
/* triangle */
.sanjiao {
    border: 20px solid transparent;
    border-bottom-color: orange ;
}
</style>

effect