CSS 是指層疊樣式表，它可以對整個站點的樣式和布局進行控制，CSS 對于整個網頁布局起到絕對性作用。那么今天 W3Cschool 小編教大家幾種基本圖形的 CSS 畫法。以下附帶源碼，同學們可以在學習完自己動手練習，加強記憶。

正方形/長方形html>

w3cschool?-?編程獅，隨時隨地學編程

.Square{

width:200px;

height:?200px;

background-color:?red;

}

.Rectangle{

width:400px;

height:?200px;

background-color:?black;

margin-top:?10px;

}

最終效果為：

三角形

w3cschool - 編程獅，隨時隨地學編程

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

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

向右的三角形，則需要設置為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 - 編程獅，隨時隨地學編程

.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 - 編程獅，隨時隨地學編程

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

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: red;

margin-left: 30px;

}

最終效果為：

梯形

w3cschool - 編程獅，隨時隨地學編程

.trapezoid {/*梯形*/

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

最終效果為：

以上就是幾種基本圖形的 CSS 畫法。大家可以根據源碼練習一下，也可以自己發揮，繪制出自己想要的圖形。更多 CSS 學習可以參照CSS 教程。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。