Cleverly use the css border attribute to implement regular graphics_html/css_WEB-ITnose

First: an example:

#div1 {

height:20px;

width:20px;

border-color:#FF9600 #3366ff #12ad2a #f0eb7a;

border-style:solid;

border-width:20px;

}

The rendering of this code is:

The white in the middle is div1 with a width and height of 20px.

Then here comes the question. To implement the triangle number, you only need to set the div width and height to 0, and then only set the border display on one side.

The code is as follows:

#div2 {

height:0;

width:0;

overflow: hidden;

border:20px dashed transparent ;

border-top:20px solid #FF9600;

}