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; } <divclass="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; } <divclass="oval"></div>

箭头：

CSS Code复制内容到剪贴板 .arrow{ content:''; position:absolute; width:30px; height:30px; border:10pxsolid#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; } <spanclass="arrow"></span>

三角形：

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