CSS如何制作圓、橢圓、箭頭和三角形圖標

這篇文章主要介紹“CSS如何制作圓、橢圓、箭頭和三角形圖標”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS如何制作圓、橢圓、箭頭和三角形圖標”文章能幫助大家解決問題。

圓：

1. .yuan{    
   width:100px;    
   height:100px;    
   -moz-border-radius:50%;    
   -webkit-border-radius:50%;    
   border-radius:50%;    
   background-color:red;    
   }    
   <div class="yuan"></div>

橢圓

1. .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>

箭頭：

.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>

三角形：

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

什么是css

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

關于“CSS如何制作圓、橢圓、箭頭和三角形圖標”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。