3回答

• 

  歪嘴的肖恩

  2015-08-21 17:53:18

  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;

  就会得到一个三角形！

  希望能够帮你理解！

  
  

  0 0
• 

  qq_木头一个_0

  2015-06-09 09:57:54

  其实很简单，你能看见的那个三角形，其实是他的一个描边，也就是border；      你可以随便试验一下，建个文件，写一个div，然后设置这个div的宽高都是0；再设置描边为比较粗的白色（描边多粗，将来三角形就有多高）。然后单独设置下边的描边为另一个颜色比如：border-bottom-color：red；，这样你就能看到一个红色的向上的小三角。你就能理解描边变成三角的意思了。不过老师这个案例里面，设置的其他的三条边是透明的，不是白色的，适用性更广。举一反三，通过这个方法可以做的事情很多。比如菱形的导航按钮等等。。

  0 0
• 

  atoure123

  2015-05-04 11:14:23

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

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

  0 0