CSS implements small triangle style

This time in the development, I wanted to use the icon triangle to illustrate the function, but I didn't want to use the picture, so I found a lot of articles on the Internet, and found that the following code is feasible, and it is sent for your reference only:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Please select an identity entry</title>
    <style type="text/css">
        .area {
            margin:100px auto;
            width:300px;
            height: 150px;
        }
        .item {
            float:left; clear:both;
            margin-bottom:23px;
        }
        /* up arrow */
        .dot-top {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-top-width: 0;
            border-style: dashed;
            border-bottom-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /* right arrow */
        .dot-right {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-right-width: 0;
            border-style: dashed;
            border-left-style: solid;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
        /* down arrow */
        .dot-bottom {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-bottom-width: 0;
            border-style: dashed;
            border-top-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
        }
        /* left arrow */
        .dot-left {
            font-size: 0;
            line-height: 0;
            border-width: 10px;
            border-color: red;
            border-left-width: 0;
            border-style: dashed;
            border-right-style: solid;
            border-top-color: transparent;
            border-bottom-color: transparent;
        }
    </style>
</head>

<body>
<div class="area">
    <span class="item dot-top"></span>
    <span class="item dot-right"></span>
    <span class="item dot-bottom"></span>
    <span class="item dot-left"></span>
</div>
</body>
</html>

There are triangle icons in all four directions.

You can adjust the size of the arrow by setting the border-width, so you don't need to do the drawing every time. It's very convenient, and the color can be adjusted at any time. I really admire that great god. It's amazing to think that you can make pointed arrows like this.

For renderings, please refer to the attached pictures

CSS implements small triangle style

Guess you like