一子刮、下面介紹CSS畫三角形的原理
1.首先畫一個(gè)div威酒，給它寬高。再加上四條邊的邊框挺峡。
div {
width: 50px;
height: 50px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid black;
border-bottom: 50px solid yellow;
}
運(yùn)行結(jié)果：
image.png
2.div的width葵孤、height置零，看運(yùn)行結(jié)果橱赠。
div {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-left:50px solid blue;
border-right: 50px solid black;
border-bottom: 50px solid yellow;
}
image.png
3.下面把其他三角形邊框顏色設(shè)置成透明色（即：border-color : transparent;）尤仍，留下需要的即可。
div {
width: 0px;
height: 0px;
border-top: 50px solid red;
border-left:50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
}
image.png
4.去掉上邊框狭姨。下面是等腰三角形
div {
width: 0px;
height: a0px;
border-top: 50px solid transparent;
border-left:50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
}
image.png
CSS三角形原理是：元素高度寬度為0宰啦，且沒有下邊框苏遥，左右邊框透明即可。
要想畫直角三角形赡模。直接去掉右邊框即可田炭。
div {
width: 0px;
height: a0px;
border-top: 50px solid transparent;
border-left:50px solid blue;
border-right: 50px solid transparent;
border-bottom: 50px solid yellow;
}
image.png
二、 如何調(diào)整邊框width來繪制各種形狀的三角形
實(shí)際運(yùn)用中纺裁，我們可能會(huì)需要制造各種形狀的三角形诫肠，那么該怎么去調(diào)整三角形的形狀呢司澎？
底邊固定時(shí)欺缘，只要調(diào)整頂點(diǎn)的位置，就可以控制形狀挤安。
頂點(diǎn)水平位置：由border-left和border-right決定谚殊，頂點(diǎn)向左調(diào)整時(shí)，需增加border-right蛤铜，減少border-left嫩絮；頂點(diǎn)向右調(diào)整時(shí)，反之围肥。
頂點(diǎn)垂直位置：由border-bottom決定剿干，border-bottom增加，頂點(diǎn)向上穆刻，反之向下置尔。
接下來看圖：
image.png
從1 到 2，三角形的頂點(diǎn)向上移動(dòng)了氢伟，對應(yīng)的榜轿，border-bottom增加了。
從1 到 3朵锣，三角形的頂點(diǎn)向右移動(dòng)了谬盐，對應(yīng)的，border-right減少了诚些。
從1 到 4飞傀，三角形的頂點(diǎn)向下移動(dòng)了，對應(yīng)的诬烹，border-bottom減少了砸烦。
代碼如下：
.box1{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid blue;
}
.box2{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 150px solid black;
}
.box3{
width: 0;
height:0 ;
border-left:100px solid transparent;
border-right: 70px solid transparent;
border-bottom: 100px solid green;
}
.box4{
width: 0;
height: 0;
border-left:100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid red;
}
三、 用三角形生成器生成
沒有彩蛋怎么算過年椅您，附上一枚懶人神奇外冀，一秒鐘出三角形，堪比渣渣輝：
