CSS 是指層疊樣式表，它可以對(duì)整個(gè)站點(diǎn)的樣式和布局進(jìn)行控制，CSS 對(duì)于整個(gè)網(wǎng)頁(yè)布局起到絕對(duì)性作用。那么今天 W3Cschool 小編教大家?guī)追N基本圖形的 CSS 畫(huà)法。以下附帶源碼，同學(xué)們可以在學(xué)習(xí)完自己動(dòng)手練習(xí)，加強(qiáng)記憶。

正方形/長(zhǎng)方形html>

w3cschool?-?編程獅，隨時(shí)隨地學(xué)編程

.Square{

width:200px;

height:?200px;

background-color:?red;

}

.Rectangle{

width:400px;

height:?200px;

background-color:?black;

margin-top:?10px;

}

最終效果為：

三角形

w3cschool - 編程獅，隨時(shí)隨地學(xué)編程

/*向下的三角形，則需要設(shè)置為border-top：100px solid red;左右邊不變

向左的三角形，則需要設(shè)置為border-right：100px soli red;上下邊不變

向右的三角形，則需要設(shè)置為border-left：100px soli red;上下邊不變*/

.triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

最終效果為：

橢圓形/圓形

w3cschool - 編程獅，隨時(shí)隨地學(xué)編程

.oval {/*橢圓*/

width: 200px;

height: 100px;

background: red;

-moz-border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

.circle {/*圓形*/

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

最終效果為：

平行四邊形

w3cschool - 編程獅，隨時(shí)隨地學(xué)編程

.parallelogram {/*平行四邊形*/

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: red;

margin-left: 30px;

}

最終效果為：

梯形

w3cschool - 編程獅，隨時(shí)隨地學(xué)編程

.trapezoid {/*梯形*/

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

最終效果為：

以上就是幾種基本圖形的 CSS 畫(huà)法。大家可以根據(jù)源碼練習(xí)一下，也可以自己發(fā)揮，繪制出自己想要的圖形。更多 CSS 學(xué)習(xí)可以參照CSS 教程。

總結(jié)

以上是生活随笔為你收集整理的css简单画法,几种基本图形的CSS画法。（附源码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。