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>
