1.給一個(gè)矩形設(shè)置border，來(lái)看如何變化
<section>
<h4>來(lái)看一個(gè)正常的矩形變化過(guò)程</h4>
<div class="b">
<div class="b1">設(shè)置了border正常寬高</div>
<div class="b2">border-top</div>
<div class="b3">border-right</div>
<div class="b4">border-left</div>
<div class="b5">border-bottom</div>
<div class="b6">background</div>
</div>
</section>
.b{
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
font-size: 10px;
text-align: center;
}
.b1{
width: 100px;
height: 70px;
border:5px solid #00aaff;
margin-right: 10px;
margin-bottom: 10px;
}
.b2{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
margin-right: 10px;
margin-bottom: 10px;
}
.b3{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
margin-right: 10px;
margin-bottom: 10px;
}
.b4{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
border-right:15px solid #3EFF8B;
margin-right: 10px;
margin-bottom: 10px;
}
.b5{
width: 100px;
height: 70px;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
border-right:15px solid #3EFF8B;
border-bottom:20px solid #ffff7f;
margin-right: 10px;
margin-bottom: 10px;
}
.b6{
width: 100px;
height: 70px;
background: pink;
border:5px solid #00aaff;
border-top: 5px solid #ff557f;
border-left: 10px solid #550000;
border-right:15px solid #3EFF8B;
border-bottom:20px solid #ffff7f;
margin-right: 10px;
margin-bottom: 10px;
}
2.改變矩形的寬高
當(dāng)矩形的寬或者高為0的時(shí)候，出現(xiàn)了梯形+三角形。
矩形的寬高都為0的時(shí)候，出現(xiàn)了三角。
從這一步，我們就可以大致的知道這個(gè)梯形，三角形是怎么形成的了。
3.當(dāng)矩形的高為0時(shí)
去掉border-top，我們可以得到下圖第二個(gè)圖片，當(dāng)將border-left和border-right設(shè)置為transparent時(shí)候，出現(xiàn)梯形。將這個(gè)梯形用rotate進(jìn)行選擇，可以得到一個(gè)向下的梯形。
同理，去掉border-bottom，border-left和border-right設(shè)置為transparent時(shí)，也可以得到一個(gè)向下的梯形。
<div class="b10">高為0，出現(xiàn)梯形+三角</div>
<div class="b11">去掉border-top</div>
<div class="b11-tixing"><p>得到梯形</p></div>
<div class="b11-tixing-rotate"><p>rotate旋轉(zhuǎn)</p></div>
.b10{
width: 50px;
height: 0;
background: pink;
border-top: 60px solid #ff557f;
border-left: 60px solid #550000;
border-right:60px solid #3EFF8B;
border-bottom:60px solid #ffff7f;
margin-right: 20px;
margin-bottom: 10px;
}
.b11{
width: 50px;
height: 0;
border-left: 60px solid #550000;
border-right:60px solid #3EFF8B;
border-bottom:60px solid #ffff7f;
margin-right: 20px;
margin-bottom: 10px;
}
.b11-tixing,.b11-tixing-rotate{
width: 50px;
height: 0;
border-left: 60px solid transparent;
border-right:60px solid transparent;
border-bottom:60px solid #ffff7f;
margin-right: 20px;
margin-bottom: 10px;
}
.b11-tixing-rotate{
transform: rotate(-180deg);
}
.b11-tixing-rotate p{
transform: rotate(180deg);
}
設(shè)置其他情況，也能得到一些想要的圖形。
4.當(dāng)矩形的寬為0時(shí)
寬度為0的時(shí)候，可以得到相應(yīng)的梯形，當(dāng)然這個(gè)梯形也可以使用rotate旋轉(zhuǎn)得來(lái)，方法并不唯一，知道即可。
5.當(dāng)矩形的寬高皆為0時(shí)
當(dāng)矩形的寬高皆為0時(shí)，可以看到設(shè)置不同的border時(shí)候，出現(xiàn)了很多三角形。
6.實(shí)心三角
假如你想得到一個(gè)向下的等腰三角，那么你只需要
（1）：去掉border-bottom
（2）：將border-left和border-right變成transparent
可以這么理解：設(shè)置相應(yīng)的兩邊為transparent，一個(gè)上三角，那就設(shè)置border-bottom，去掉border-top，下三角，設(shè)置border-top，去掉border-bottom。左三角，設(shè)置border-right，右三角設(shè)置border-left。
若你想得到一個(gè)向右直角三角形：
（1）：只需設(shè)置兩邊即可，border-top，border-right
（2）：border-right設(shè)置為transparent
其他的可以多試試，可以發(fā)現(xiàn)是有規(guī)律存在的。
<section>
<h4>實(shí)心三角來(lái)了</h4>
<div class="b">
<div class="b25"></div>
<div class="b26"></div>
<div class="b27"></div>
<div class="b28"></div>
<div class="b29"></div>
<div class="b30"></div>
<div class="b31"></div>
<div class="b32"></div>
<div class="b33"></div>
</div>
</section>
.b25{
width: 0;
height: 0;
border-top: 80px solid #A8C992;
border-left: 80px solid transparent;
border-right:80px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b26{
width: 0;
height: 0;
border-bottom: 80px solid #A8C992;
border-left: 80px solid transparent;
border-right:80px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b27{
width: 0;
height: 0;
border-left: 80px solid #A8C992;
border-top: 40px solid transparent;
border-bottom:40px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b28{
width: 0;
height: 0;
border-right: 80px solid #A8C992;
border-top: 40px solid transparent;
border-bottom:40px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
}
.b29{
height: 0;
width: 0;
border-color: #6c94c2 #193eaf transparent transparent;
border-style: solid solid dashed dashed;
border-width: 40px 40px 0 0;
margin-right: 20px;
margin-bottom: 10px;
}
.b30{
height: 0;
width: 0;
border-top: 40px solid #a4d1eb;
border-right: 80px solid transparent;
}
.b31{
height: 0;
width: 0;
border-bottom: 40px solid #a4d1eb;
border-right: 80px solid transparent;
}
.b32{
height: 0;
width: 0;
border-top: 40px solid #aa007f;
border-left: 80px solid transparent;
}
.b33{
height: 0;
width: 0;
border-bottom: 40px solid #aa007f;
border-left: 80px solid transparent;
}
7.空心三角
實(shí)現(xiàn)原理：先正常定義一個(gè)實(shí)心三角，利用偽元素，在定義一個(gè)比實(shí)心三角稍小一點(diǎn)的一個(gè)顏色為白色的三角。
.b34{
width: 0;
height: 0;
border-top: 80px solid #A8C992;
border-left: 80px solid transparent;
border-right:80px solid transparent;
margin-right: 20px;
margin-bottom: 10px;
position: relative;
}
.b34::after{
content: "";
position:absolute;
top: -79px;
left: -78px;
width: 0;
height: 0;
border-top: 78px solid #fff;
border-left: 78px solid transparent;
border-right:78px solid transparent;
}
8.等邊箭頭
實(shí)現(xiàn)一個(gè)箭頭有兩種方式：
1.設(shè)置相應(yīng)的寬高（寬和高必須相等，否則得到的是一個(gè)長(zhǎng)度不一的箭頭），并且設(shè)置border-top和border-right，得到以下：
利用 transform: rotate(-45deg)進(jìn)行旋轉(zhuǎn)得到不同角度的箭頭。
2.不設(shè)置寬高，設(shè)置padding值，padding的值越大，這個(gè)箭頭就越大，如，padding:5px。
再利用利用 transform: rotate(-45deg)進(jìn)行旋轉(zhuǎn)得到不同角度的箭頭。
9.等腰箭頭
原理：先正常定義一個(gè)實(shí)心三角，利用偽元素，在定義一個(gè)比實(shí)心三角稍小一點(diǎn)的一個(gè)顏色為白色的三角。對(duì)這個(gè)大的三角進(jìn)行一部分的覆蓋，實(shí)現(xiàn)等腰三角箭頭。
10.實(shí)現(xiàn)提示框
原理：
一個(gè)正常的圓角矩形+一個(gè)空心三角形
（這個(gè)空心三角形是兩個(gè)偽元素實(shí)現(xiàn)的三角形，其中一個(gè)三角形背景色為白色并且小于有顏色的三角形）
11.一些其他樣式，可以通過(guò)偽元素得到
多嘗試，會(huì)發(fā)現(xiàn)很多不一樣的東西。
