CSS制作箭頭圖標代碼(圓，三角形，橢圓)
發(fā)布時間：2016-03-30 11:07:13 作者：佚名 
我要評論
我要評論css3功能非常強大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標，非常使用，需要的朋友參考下吧
css3功能非常強大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標，非常使用，需要的朋友參考下吧
圓：
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寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下2017-09-29
- 本文給大家?guī)硪欢未a基于div+css實現(xiàn)三角形提示框，代碼簡單易懂，需要的朋友可以參考下2016-09-20
- 這篇文章主要為大家詳細介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下2016-06-28
- 最近我想修改一下這個網(wǎng)站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭?？墒?，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準2014-05-07
- 本文為大家介紹下使用純css實現(xiàn)的交互小三角箭頭圖標，示例代碼如下，感興趣的朋友可以參考下2013-12-10
通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼
這篇文章主要介紹了通過CSS邊框?qū)崿F(xiàn)三角形和箭頭的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-15
