css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧

圆：

CSS Code 复制内容到剪贴板 .yuan{     width : 100px ;     height : 100px ;     -moz- border -radius:50%;     -webkit- border -radius:50%;     border -radius:50%;     background-color : red ;     }     <div class= "yuan" ></div>   


椭圆 CSS Code复制内容到剪贴板 .oval {     width: 200px;     height: 100px;     background-color: red;     -moz-border-radius: 100px / 50px;     -webkit-border-radius: 100px / 50px;     border-radius: 100px / 50px;     }     <div class="oval"></div>   



箭头：

CSS Code 复制内容到剪贴板 .arrow{     content :  '' ;     position :  absolute ;     width :  30px ;     height :  30px ;     border :  10px   solid   #f5b24a ;     -webkit-transform: rotate(-135deg);     -moz-transform: rotate(-135deg);     -o-transform: rotate(-135deg);     -ms-transform: rotate(-135deg);     transform: rotate(-135deg);     border-top :  none ;     border-right :  none ;     top :  9px ;     }     <span class= "arrow" ></span>   


三角形：

CSS Code 复制内容到剪贴板 .rencentle {     width : 0;     height : 0;     border-left :  50px   solid   transparent ;     border-right :  50px   solid   transparent ;     border-bottom :  100px   solid   red ;     }     <div class= "rencentle" ></div>