CSS制作箭頭圖標(biāo)代碼(圓，三角形，橢圓)
發(fā)布時(shí)間：2016-03-30 11:07:13 作者：佚名 
我要評(píng)論
我要評(píng)論css3功能非常強(qiáng)大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實(shí)現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標(biāo)，非常使用，需要的朋友參考下吧
css3功能非常強(qiáng)大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實(shí)現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標(biāo)，非常使用，需要的朋友參考下吧
圓：
CSS Code復(fù)制內(nèi)容到剪貼板
- .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復(fù)制內(nèi)容到剪貼板
- .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復(fù)制內(nèi)容到剪貼板
- .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復(fù)制內(nèi)容到剪貼板
- .rencentle {
- width: 0;
- height: 0;
- border-left: 50px solid transparent;
- border-right: 50px solid transparent;
- border-bottom: 100px solid red;
- }
- <div class="rencentle"></div>
相關(guān)文章
詳解CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)
本篇文章主要介紹了CSS3 用border寫(xiě) 空心三角箭頭 (兩種寫(xiě)法)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-29- 本文給大家?guī)?lái)一段代碼基于div+css實(shí)現(xiàn)三角形提示框，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2016-09-20
- 這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 最近我想修改一下這個(gè)網(wǎng)站，我想在上面放置一個(gè)提示框。這是很容易，但我想讓提示框上有一個(gè)三角形的箭頭。可是，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準(zhǔn)2014-05-07
css實(shí)現(xiàn)的交互小三角箭頭圖標(biāo)
本文為大家介紹下使用純css實(shí)現(xiàn)的交互小三角箭頭圖標(biāo)，示例代碼如下，感興趣的朋友可以參考下2013-12-10
通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼
這篇文章主要介紹了通過(guò)CSS邊框?qū)崿F(xiàn)三角形和箭頭的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-15
