Use the border attribute to make small symbols_html/css_WEB-ITnose

While studying the past two days, I found a small symbol on the website and thought it was an inserted img, but I couldn’t find the address of the img after searching for it. Finally, I asked my classmates and learned that it was made using the border attribute. The

symbol is as shown on the right:

The css code is as follows:

.fuhao{    position:absolute;    top:12px;    left:12px;    width:0px;    height:0px;    overflow:hidden;    border-width:6px 0px 6px 6px;    border-color:transparent #A92222;    border-style:dashed none dashed solid;}

Here we use an empty div, fuhao, to define it After positioning, make it height and width 0, but the border has width. So there is nothing inside this div, only the border.

Logically speaking, it should look like this:

Then the following statement makes the upper and lower borders transparent, and the right border 0px, and the symbol is obtained.

Actually, I don’t understand it very well, but I think it’s very interesting to use borders to make symbols. Just use it as you see it.