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>

你可以看看这么设置的情况，三角形其实就是把其他三个边颜色透明的原理