http://www.w3school.com.cn/tiy/t.asp?f=csse_border

這是W3C的一個(gè)border的一個(gè)測(cè)試，我改造了一下，你把一下代碼替代原來(lái)的p:

p?

{

? ? width: 100;

? ? height: 100;

? ? border-left: 50px solid green;

? ? border-right: 50px solid green;

? ? border-top: 50px solid yellow;

? ? border-bottom: 100px solid red;

}

我覺(jué)得這里的難點(diǎn)還是在border的形狀上，原來(lái)我以為border都是矩形的，其實(shí)是等腰梯形

還有一點(diǎn)是在將width和height改為0后，你也會(huì)發(fā)現(xiàn)border會(huì)自動(dòng)拼合在一起，擠掉原來(lái)width和height占據(jù)的位置，你在試著將其他三條邊改為透明

?border-left: 50px solid transparent;

? ? border-right: 50px solid transparent;

? ? border-top: 50px solid transparent;

就會(huì)得到一個(gè)三角形！

希望能夠幫你理解！

其實(shí)很簡(jiǎn)單，你能看見(jiàn)的那個(gè)三角形，其實(shí)是他的一個(gè)描邊，也就是border；????? 你可以隨便試驗(yàn)一下，建個(gè)文件，寫(xiě)一個(gè)div，然后設(shè)置這個(gè)div的寬高都是0；再設(shè)置描邊為比較粗的白色（描邊多粗，將來(lái)三角形就有多高）。然后單獨(dú)設(shè)置下邊的描邊為另一個(gè)顏色比如：border-bottom-color：red；，這樣你就能看到一個(gè)紅色的向上的小三角。你就能理解描邊變成三角的意思了。不過(guò)老師這個(gè)案例里面，設(shè)置的其他的三條邊是透明的，不是白色的，適用性更廣。舉一反三，通過(guò)這個(gè)方法可以做的事情很多。比如菱形的導(dǎo)航按鈕等等。。

<div style="margn:50px auto; padding:0; width:20px; height:20px; border:20px solid #000; border-left-color:#f00;"></div>

你可以看看這么設(shè)置的情況，三角形其實(shí)就是把其他三個(gè)邊顏色透明的原理