Code to implement simple arrow icon using div+CSS in HTML

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

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

First put 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 to the left*/.to_left { width: 0; height: 0; border-right: 10px solid #ccc; border-top: 10px solid transparent; border-bottom: 10px solid transparent;}/ *Arrow to the 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.

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

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 change the number of arrows by modifying the code below C, or we can modify the width and height to change the size of the arrow.

transform: rotate(-135deg);/*调整旋转的角度*/

The above is the code that the editor introduces to you to use div+CSS to implement a simple arrow icon in HTML. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for your support of the VeVb martial arts website!

If you think this article is helpful to you, you are welcome to reprint it, please indicate the source, thank you!