CSS怎樣制作箭頭圖標(biāo)

這篇文章主要為大家展示了“CSS怎樣制作箭頭圖標(biāo)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“CSS怎樣制作箭頭圖標(biāo)”這篇文章吧。

 css3功能非常強(qiáng)大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實(shí)現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標(biāo)，非常使用，需要的朋友參考下吧

圓：

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>   

橢圓

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>   

箭頭：

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>   

三角形：

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>

以上是“CSS怎樣制作箭頭圖標(biāo)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！