今天讀大漠老師的圖解css3中，遇到一個需要畫三角形的地方，我剛好學(xué)一下。
image.png
這里是我做的一些注釋，我們來看一下，首先我們設(shè)置了一個白色的5px的border，通過設(shè)置寬高為0達(dá)到整個盒子只剩下border值，然后通過border-color來取到三角形，我們也可以通過調(diào)整顏色值的位置來達(dá)到不同方向上的
實體三角形。實現(xiàn)效果如下
image.png
到這里我們就可以獲取到一個簡單的三角形，但是如果我們想要一個沒有內(nèi)邊線的三角形呢，如圖示
image.png
是不是要動動腦筋呢，實現(xiàn)的思路其實還是上面那個，但是需要動一動你的腦袋，首先我們把問題分解，一步步的去實現(xiàn)這個過程才是收貨。
- 我們可以先拿到一個矩形框
- 其次我們也可以通過設(shè)置邊框的方式來拿到三角形，可是好像一個三角形拿不到我們想要的結(jié)果啊，怎么辦呢？
- 一個實心三角形我會了，但是中間那部分怎么去掉呢？好像把三角形的黑色部分去掉不就可以了嘛，我可以再設(shè)置一個三角形來達(dá)到目的的
- 通過實心三角形的方法我能拿到大小兩個三角形了，然后通過把小三角形的顏色設(shè)置為transparent就可以了
最終實現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#demo {
width: 300px;
height: 150px;
background-color: #fff;
position: relative;
border: 4px solid #333;
}
#demo:after, #demo:before {
/*這里邊框是為了方便看清楚演示*/
border: 5px solid #ccc;
content: '';
width: 0;
height: 0;
left: 100%;
position: absolute;
}
#demo:before {
border-width: 14px;
border-color: transparent transparent transparent #333 ;
top: 10px;
}
#demo:after {
border-width:9px;
border-color: transparent transparent transparent #fff ;
top:15px;
}
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
ok，也算是復(fù)習(xí)css頭疼之后一點小樂趣吧，鼓勵一下，繼續(xù)加油！
