CSS 是指層疊樣式表，它可以對(duì)整個(gè)站點(diǎn)的樣式和布局進(jìn)行控制，CSS 對(duì)于整個(gè)網(wǎng)頁布局起到絕對(duì)性作用。那么今天 W3Cschool 小編教大家?guī)追N基本圖形的 CSS 畫法。以下附帶源碼，同學(xué)們可以在學(xué)習(xí)完自己動(dòng)手練習(xí)，加強(qiáng)記憶。
正方形/長(zhǎng)方形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 編程獅，隨時(shí)隨地學(xué)編程</title>
<style>
.Square{
width:200px;
height: 200px;
background-color: red;
}
.Rectangle{
width:400px;
height: 200px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="Square"></div>
<div class="Rectangle"></div>
</body>
</html>
最終效果為：
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 編程獅，隨時(shí)隨地學(xué)編程</title>
<style>
/*向下的三角形，則需要設(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;
}
</style>
</head>
<body>
<div class="triangle-up"></div>
</body>
</html>最終效果為：
橢圓形/圓形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 編程獅，隨時(shí)隨地學(xué)編程</title>
<style>
.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;
}
</style>
</head>
<body>
<div class="oval"></div>
<div class="circle"></div>
</body>
</html>最終效果為：
平行四邊形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 編程獅，隨時(shí)隨地學(xué)編程</title>
<style>
.parallelogram {/*平行四邊形*/
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: red;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="parallelogram"></div>
</body>
</html>最終效果為：
梯形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>w3cschool - 編程獅，隨時(shí)隨地學(xué)編程</title>
<style>
.trapezoid {/*梯形*/
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="trapezoid"></div>
</body>
</html>最終效果為：
以上就是幾種基本圖形的 CSS 畫法。大家可以根據(jù)源碼練習(xí)一下，也可以自己發(fā)揮，繪制出自己想要的圖形。更多 CSS 學(xué)習(xí)可以參照CSS 教程。
