伪类三角形

空心三角形
html：
<span class="square"></span>
css :

.square:after {

content: '';

display: inline-block;

width: 8px;

height: 8px;

border-top: 1px solid #656565;

border-right: 1px solid #656565;

transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

}

实心三角形

.squarea:after{

content: "";

display: inline-block;

width: 0;

height: 0;

border-left: 3px solid transparent;

border-right: 5px solid transparent;

border-top: 10px solid red;

}