Code for implementing simple arrow icon using div+CSS in HTML

In web design, we often use arrows as decoration to embellish our web pages. Although many website designers now like to use font icons to achieve the effect of arrows, that will also have some impact on the loading of the web page. Today, the editor of Feiniao Muyu will tell you how to use div and CSS to achieve some arrow effects in web design.

DIV+CSS to achieve the effect of a solid small arrow

In some secondary navigation menus on web pages, or lists with drop-down functions, there are some small arrows implemented to indicate that a DIV contains content. So how do we implement the style of these small arrows?

First, the CSS code

/*Arrow up*/
.to_top {
    width: 0;
    height: 0;
    border-bottom: 10px solid #ccc;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
/*arrow down*/
.to_bottom {
    width: 0;
    height: 0;
    border-top: 10px solid #ccc;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
/*Arrow pointing left*/
.to_left {
    width: 0;
    height: 0;
    border-right: 10px solid #ccc;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
/*arrow right*/
    .to_right {
    width: 0;
    height: 0;
    border-left: 10px solid #cccf;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

HTML Code

<p>Up Arrow</p>
<div class="to_top"></div>
<p>Left Arrow</p>
<div class="to_left"></div>
<p>Right Arrow</p>
<div class="to_right"></div>
<p>Down Arrow</p>
<div class="to_bottom"></div>

Code running results

If you feel that the arrow is too big or too small, and the color is not what you want, we can adjust the size of the arrow by adjusting the thickness and color of the DIV border.

DIV+CSS to achieve the effect of large arrow

When I was modifying the three-column theme yesterday, a user gave me feedback that a large left and right arrow should be added. Although it is very simple to implement (you can use a background image instead), you need to add a background function that can customize the color, so I thought of using DIV+CSS to draw the arrow, so that you can easily customize the color of the arrow.

CSS Code

.text{
    display: inline-block;
    border-top: 2px solid;
    border-right: 2px solid;
    width: 100px;
    height: 100px;
    border-color: #EA6000;
    transform: rotate(-135deg);
    margin: 50px auto auto 100px;
}

HTML Code

<span class="text"></span>

Code running results

We can modify the arrow type by modifying the code below C, and we can also modify the width and height to change the size of the arrow.

transform: rotate(-135deg);/*Adjust the rotation angle*/

Summarize

The above is the code that I introduced to you in HTML using div+CSS to implement a simple arrow icon. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!