如何用css3畫三角形和一個圓形
2018-11-01 來源：學(xué)做網(wǎng)站論壇
通過CSS樣式可以控制網(wǎng)頁中各個元素的顯示方式，通過CSS樣式可以在網(wǎng)頁中畫出一個三角形，圓形等形狀。（了解更多CSS知識，請學(xué)習(xí)CSS視頻教程）
CSS畫三角形方法
1、新建一個元素，隨便什么元素，不過我習(xí)慣性的會用塊元素來做。如果行內(nèi)元素就display:block它。
<div></div>
2、把它的寬高設(shè)置為height:0px; width:0px;
3、設(shè)置邊框border屬性，用來實現(xiàn)三角形。
首先要了解border具體是怎么樣的，我寫了一個這樣的樣式：
border:50px solid #000; border-color:#f00 #000 #f0f #00f;
出現(xiàn)4個三角形合并成一個正方形。到這里就很清晰了，只要把想要的保留，其它的設(shè)置為透明就可以達到三角形的效果，那么：
border:50px solid #000; border-color:#f00 transparent transparent transparent;
也可以設(shè)置Transitions屬性來形成一個傾斜的三角形，如下圖：
CSS畫圓形方法
CSS畫圓形，只需要通過設(shè)置DIV的圓角邊框即可。代碼如下：
border-rsdius:78.5px 78.5px 78.5px 78.5px;
接下來用padding控制半徑：padding:50px;還可以根據(jù)自己喜好設(shè)置背景色和邊框。效果如下：
CSS畫圓的CSS樣式：
#circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
最新資訊
熱門推薦