Want to know how to make ICONS with CSS? And when you only use one tag, you can’t use false elements.

When making ICONS with CSS, you often use the border border, so let’s take a look at the border.

1. Unspeakable secrets hidden in the border

<style>
    .box{
        width:100px;
        height:100px;
        border-top:10px solid red;
        border-right:10px solid blue;
        border-bottom:10px solid yellow;
        border-left:10px solid green;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

The running results are as follows:

Each border is a trapezoid, so what if we set the width and height to 0?

In the image above, you can see that all four borders become triangles, so if you set the left, right, and bottom borders to transparent, you will see a lower triangle.

We also had some problems with using borders, such as:

As you can see from the figure above, the left border of the second and third menus is incorrect because the right border of the first element is superimposed on the left border of the second element. To solve this problem, simply remove the left border of the next two elements or set their margin-left to negative values.

<style>
    *{
        margin:0;
        padding:0;
    }
    li{
        list-style:none;
    }
    ul li{
        float:left;
        width:100px;
        height:35px;
        line-height:35px;
        text-align:center;
        margin:100px auto;
        border:4px solid #dedede;} ul li ~ li{ /*border-left:none; */ margin-left:-4px; } </style> <body> <ul> <li>HTML</li> <li>CSS</li> <li>Javascript</li> </ul> </body>Copy the code

The running effect is as follows:

2. An outline property that looks like a border

You can use it to outline elements without taking up space.

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        margin:100px auto;
        text-align:center;
        background:red;
        outline:1px solid #dedede;
    }
</style>
<body>
    <div class="box">outline</div>
</body>
Copy the code

What is the width and height of this div?

Using the Outline property is a good way to solve the jitter problem of dynamically adding borders when the mouse moves over an element.

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        margin:100px auto;
        text-align:center;
        background:red;
    }
    .box:hover{
        outline:4px solid #dedede;
    }
</style>
<body>
    <div class="box">outline</div>
</body>
Copy the code

The running results are as follows:

Note that border-radius does not apply to outline.

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        margin:100px auto;
        text-align:center;
        background-color:red;
        outline:5px solid #dedede;
        border-radius:20px;
    }
</style>
<body>
    <div class="box">outline</div>
</body>
Copy the code

The running results are as follows:

What if you want to use border-radius without taking up space?

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        background-color:red;
        border:10px solid #dedede;
        border-radius:20px;
        box-sizing:border-box;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

You can also use the box-shadow attribute:

<style>
    .box{
        width:100px;
        height:100px;
        line-height:100px;
        text-align:center;
        background-color:red;
        box-shadow:0 0 0 10px #dedede;
        border-radius:10px;
        margin:10px;
    }
</style>
<body>
    <div class="box">box-shadow</div>
</body>
Copy the code

The running results are as follows:

Box-shadow: X-axis offset, Y-axis offset, shadow size, border size, fill color. Using this property, you can better simulate borders without taking up space.

3. Use the CSS to create ICONS

(1) Parallelogram icon

<style>
    .box{
        width:50px;
        height:50px;
        background:red;
        transform:skew(-25deg);
        margin-left:100px;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

The running results are as follows:

(2) Pause button

The principle of the pause button is to use the border, the square inside the outline, then use the outline-offset property can be used to set the offset, and is in accordance with the scale.

<style>
    .box{
        width:50px;
        height:50px;
        color:# 000;
        border:1px solid # 000;
        cursor:pointer;
        border-radius:50%;
        outline:10px solid # 000;
        outline-offset:-26px;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code
The running results are as follows:

If you set the outline-offset a little smaller, you get a + sign.

If you modify a few more attributes and add a few more attributes, the following icon appears: 
<style>
    .box{
        width:50px;
        height:50px;
        background-color:# 000;
        border:1px solid # 000;
        cursor:pointer;
        border-radius:50%;
        outline:10px solid #fff;
        outline-offset:-35px;
        transform:rotate(45deg);
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

(3) Trapezoidal icon

<style>
    .box{
        width:35px;
        border:50px solid transparent;
        border-bottom:50px solid red;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

The running results are as follows:

(4) Eagle beak icon

<style>
    .box{
        width:35px;
        border-top:50px solid transparent;
        border-right:22px solid # 096;
        border-bottom-right-radius:100%;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

The running results are as follows:

(5) Left and right arrow ICONS

<style>
    .box{
        width:0;
        height:0;
        border:10px solid transparent;
        border-left:10px solid red;
        -webkit-box-reflect: left 5px;
        box-reflect:left 5px;
        margin-left:100px;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

The running results are as follows:

It’s worth noting that the Box-Reflect property has compatibility issues and can only be opened in Chrome.

(6) Download ICONS

<style>
    .box{
        width:0;
        color:blue;
        border:8px solid transparent;
        border-top:8px solid blue;
        box-shadow:0 -12px 0 -4px;
    }
</style>
<body>
    <div class="box"></div>
</body>
Copy the code

The running results are as follows: