CSS制作箭头图标代码(圆，三角形，椭圆)

 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>

   

椭圆 CSS