欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS制作箭頭圖標代碼(圓，三角形，橢圓)

  發(fā)布時間：2016-03-30 11:07:13   作者：佚名   我要評論
css3功能非常強大，之前需要圖片完成的icon，現在我們只需要幾段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>

   

相關文章

  • 詳解CSS3 用border寫 空心三角箭頭 (兩種寫法)

    本篇文章主要介紹了CSS3 用border寫 空心三角箭頭 (兩種寫法)，非常具有實用價值，需要的朋友可以參考下
    2017-09-29

  • DIV+CSS實現帶三角箭頭的提示框

    本文給大家?guī)硪欢未a基于div+css實現三角形提示框，代碼簡單易懂，需要的朋友可以參考下
    2016-09-20

  • 純CSS繪制三角形箭頭圖案技術解析

    這篇文章主要為大家詳細介紹了純CSS繪制三角形箭頭圖案技術，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下
    2016-06-28

  • 純CSS繪制三角形箭頭效果

    最近我想修改一下這個網站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭?？墒?，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準
    2014-05-07

  • css實現的交互小三角箭頭圖標

    本文為大家介紹下使用純css實現的交互小三角箭頭圖標，示例代碼如下，感興趣的朋友可以參考下
    2013-12-10

  • 通過CSS邊框實現三角形和箭頭的實例代碼

    這篇文章主要介紹了通過CSS邊框實現三角形和箭頭的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-01-15

最新評論