用CSS写 > 和 √ 符号

html:
<span class="icon">
<i class="arrow"></i>
</span>
css:
.icon{
position:relative;
display:inline-block;
width:20px;
height:20px;
background-color:#eee;
border-radius:50%;
vertical-align:top;
}
.arrow{
display:block;
position:relative;
width:12px; //10px
height:12px; //10px
top:0; //2px
left:4px; //5px
-webkit-transform:rotate(-45deg);
}
.arrow::before,.arrow::after{
position:absolute;
content:'';
left:0;
bottom:0;
background-color:#fff;
}
.arrow::before{
width:2px;
height:8px;
}
.arrow::after{
width:9px;
height:2px;
}

html:
<span class="icon">
<i class="arrow"></i>
</span>
css:
.icon{
position:relative;
display:inline-block;
width:20px;
height:20px;
background-color:#59d37b;
border-radius:50%;
vertical-align:top;
}
.arrow{
display: block;
position: relative;
top: 6px;
left: 5px;
height: 6px;
width: 11px;
-webkit-transform: rotate(-45deg);
}
.arrow::before,.arrow::after{
position:absolute;
content:'';
left:0;
bottom:0;
background-color:#fff;
}
.arrow::before{
width: 2px;
height: 6px;
}
.arrow::after{
width: 11px;
height: 2px;
}

html:
<span class="icon">
<i class="arrow"></i>
</span>
css:
.icon{
position:relative;
display:inline-block;
width:20px;
height:20px;
background-color:red;
border-radius:50%;
vertical-align:top;
}
.arrow{
display: block;
position: relative;
top: 5px;
left: 7px;
height: 11px;
width: 10px;
-webkit-transform: rotate(-45deg);
}
.arrow::before,.arrow::after{
position:absolute;
content:'';
background-color:#fff;
}
.arrow::before{
width: 2px;
height: 12px;
left: 3px;
top: -2px;
}
.arrow::after{
width: 12px;
height: 2px;
top: 3px;
left: -2px;
}