CSS制作箭头图标代码

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

 css3功能非常强大，之前需要图片完成的icon，现在我们只需要几段css代码就可以实现此功能。

下面给大家分享纯css制作的圆，椭圆，三角形箭头图标，非常使用，需要的朋友参考下吧

圆：

CSS Code复制内容到剪贴板

1. .yuan{    
2. width:100px;    
3. height:100px;    
4. -moz-border-radius:50%;    
5. -webkit-border-radius:50%;    
6. border-radius:50%;    
7. background-color:red;    
8. }    
9. <div class="yuan"></div>   

椭圆 CSS Code复制内容到剪贴板

1. .oval {    
2. width: 200px;    
3. height: 100px;    
4. background-color: red;    
5. -moz-border-radius: 100px / 50px;    
6. -webkit-border-radius: 100px / 50px;    
7. border-radius: 100px / 50px;    
8. }    
9. <div class="oval"></div>   

箭头：

CSS Code复制内容到剪贴板

1. .arrow{    
2. content: '';    
3. position: absolute;    
4. width: 30px;    
5. height: 30px;    
6. border: 10px solid #f5b24a;    
7. -webkit-transform: rotate(-135deg);    
8. -moz-transform: rotate(-135deg);    
9. -o-transform: rotate(-135deg);    
10. -ms-transform: rotate(-135deg);    
11. transform: rotate(-135deg);    
12. border-top: none;    
13. border-right: none;    
14. top: 9px;    
15. }    
16. <span class="arrow"></span>   

三角形：

CSS Code复制内容到剪贴板

1. .rencentle {    
2. width: 0;    
3. height: 0;    
4. border-left: 50px solid transparent;    
5. border-right: 50px solid transparent;    
6. border-bottom: 100px solid red;    
7. }    
8. <div class="rencentle"></div>