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

這是W3C的一個border的一個測試，我改造了一下，你把一下代碼替代原來的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;

}

我覺得這里的難點還是在border的形狀上，原來我以為border都是矩形的，其實是等腰梯形

還有一點是在將width和height改為0后，你也會發現border會自動拼合在一起，擠掉原來width和height占據的位置，你在試著將其他三條邊改為透明

?border-left: 50px solid transparent;

? ? border-right: 50px solid transparent;

? ? border-top: 50px solid transparent;

就會得到一個三角形！

希望能夠幫你理解！

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

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

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