對CSS了解越多，越覺得CSS能做很多有趣的事情酪耳。今天主要整理CSS的繪圖功能浓恳。
一、繪制一個簡單三角形
首先我們來繪制一個簡單的三角形碗暗。
在繪制三角形之前颈将，你要仔細(xì)想一想，對于一個div言疗，你是否真的了解它的border-left/right/top/bottom長什么樣子晴圾？
1、只存在一個邊框時
// html
<body>
<div class='triangle'></div>
</body>
//css
.triangle{
width:100px;
height:100px;
background:#ddd;
border-left:100px solid;
}
結(jié)果：
2噪奄、存在兩個邊框時
// html
<body>
<div class='triangle'> </div>
</body>
//css
.triangle{
width:100px;
height:100px;
background:#ddd;
border-left:100px solid;
border-top:100px solid red;
}
結(jié)果：
怎么樣死姚？出乎意料嗎？
3勤篮、存在四個邊框時
三個邊框的情況請自行腦補(bǔ)都毒，我們直接來看四個邊框。
// html
<body>
<div class='triangle'></div>
</body>
//css
.triangle{
width:100px;
height:100px;
background:#ddd;
border-left:100px solid;
border-top:100px solid red;
border-right:100px solid yellow;
border-bottom:100px solid blue;
}
結(jié)果：
總結(jié)：邊框總是會把div顯示得“方方正正”碰缔，使整個div看起來不會出現(xiàn)棱角（除直角以外的其他角度）账劲。
4、在四個邊框的情況下金抡，設(shè)置div寬高為0
// html
<body>
<div class='triangle'> </div>
</body>
//css
.triangle{
width:0;
height:0;
background:#ddd;
border-left:100px solid;
border-top:100px solid red;
border-right:100px solid yellow;
border-bottom:100px solid blue;
}
結(jié)果：
如上圖所示瀑焦，通過設(shè)置div的height和width為0 ，就可以得到由div的border繪制出的四個三角形梗肝。
我們只需設(shè)置其中三個border不可見蝠猬，即可得到一個等邊直角三角形。
// html
<body>
<div class='triangle'></div>
</body>
//css
.triangle{
width:0;
height:0;
background:#ddd;
border-left:100px solid transparent;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid blue;
}
結(jié)果：
二统捶、繪制太極圖形
1榆芦、方案一
將太極圖案分解為如下三個div：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='parent'>
<div class='yang'></div>
<div class='yin'></div>
</div>
</body>
</html>
//css
.parent{
width:0;
height:300px;
border-left:150px solid transparent;
border-right:150px solid transparent;
border-radius:100%;
/* box-shadow:0 0 5px 5px #ddd; */
}
.yang,.yin{
width:150px;
height:150px;
margin:000-75px;
border-radius:50%;
position:relative;
}
.yang{
background:white;
}
.yin{
background:black;
}
.yang::after,.yin::after{
content:'';
display:block;
width:50px;
height:50px;
border-radius:50%;
position:absolute;
top:50px;
left:50px;
}
.yang::after{
background:black;
}
.yin::after{
background:white;
}
2、方案二
將太極圖案分解為一個div喘鸟，并在該div上設(shè)置“陰”和“陽”兩個偽元素匆绣。這種方法只需構(gòu)造一個div，更加簡潔方便什黑。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class='parent'></div>
</body>
</html>
//css
*{
box-sizing:border-box;
}
.parent{
width:300px;
height:300px;
border-radius:50%;
background:linear-gradient(to right,#fff 0%,#fff 50%,#000 50%,#000 100%);
box-shadow:0 0 10px hsla(0,0%,0%,0.25);
}
.parent::before{
content:'';
display:block;
width:50px;
height:50px;
border:50px solid #fff;
background:#000;
border-radius:50%;
margin-left:75px;
}
.parent::after{
content:'';
display:block;
width:50px;
height:50px;
border:50px solid #000;
background:#fff;
border-radius:50%;
margin-left:75px;
}
“CSS繪制圖形”就先說這么多崎淳，其實(shí)了解了原理后，這一部分還是挺簡單的愕把，無非就是利用border的一些特性拣凹、::before和::after等偽元素并使用定位來完成相應(yīng)的效果森爽。
由于個人水平有限，博客錯誤之處嚣镜，煩請指正爬迟！
