About the sawtooth problem of pure css write triangle in Firefox

Believe that many people have used the use of border to achieve the small triangle arrow, Baidu, this kind of article a lot of, here I still wordy point to the common methods of display:

. Triangle_border_up {    width:0;     height:0;     border-width:0 30px 30px;     border-style:solid;     border-color:transparent transparent #333; /* Transparent transparent  gray */    margin:40px auto;     Position:relative;}

Or:

. Border_bottom {                width:0;                 height:0;                 Border:10px solid Transparent;                 border-bottom: 11px solid #000;            }

This writing has a problem, that is, there will be a sawtooth in Firefox, looking at the unpleasant, as shown below, this is enlarged, triangular smaller sawtooth more obvious, other browsers are very lubricated, the following right figure.

Search on the Internet very few people mention that there seems to be no practical solution mentioned, the following is a very simple way to give the color of the border width of a pixel:

. Border_bottom {                width:0;                 height:0;                 Border:50px solid Transparent;                 border-bottom: 51px solid #000;            }

is not very slippery ....

About the sawtooth problem of pure css write triangle in Firefox