CSS如何制作圓、橢圓、箭頭和三角形圖標(biāo)

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

圓：

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是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對(duì)于網(wǎng)頁進(jìn)行格式化。

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