Html+CSS drawing triangle icon

Let’s take a look at the renderings first:

XML/HTML CodeCopy content to clipboard

<!doctype html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Document </ title >
< style type = "text/css" >
#test1 {
height:20px;
width:20px;
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
#test2 {
height:0;
width:0;
overflow: hidden; /* Set overflow, font-size, line-height here */
font-size: 0; /*Because, although the width and height are 0, it will have the default size in IE6 */
line-height: 0; /* Font size and line height, causing the box to appear as a stretched long rectangle */
border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
border-style:solid;
border-width:20px;
}
#test3 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid;
border-width:20px;
}
#test4 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 transparent transparent transparent;
border-style:solid dashed dashed dashed;
border-width:20px;
}/*Compatible with IE6*/
#test5 {
height:0;
width:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border-color:#FF9600 #3366ff transparent transparent;
border-style:solid solid dashed dashed;
border-width:40px 40px 0 0 ;
}
</ style >
</ head >
< body >
< div id = "test1" > </ div > < br >
< div id = "test2" > </ div > < br >
< div id = "test3" > </ div > < br >
< div id = "test4" > </ div > < br >
< div id = "test5" > </ div > < br >
</ body >
</ html >

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: How to solve the problem of margin overlap

>>: Problem of retrieving root password in MYSQL 5.7 under Linux (tested and available)