css三角形代码：div{width:0;border:10px solid transparent;border-top:10px solid red;} 其中，border是边框属性，transparent是透明色的意思。border-top/left/bottom/right是控制三角形方向的。注意，盒子一定要是正方形。如果是长方形，那么写出来的就是等腰T形。为什么正方形写出来的是三角形，而...
如何用css写出倒三角形的分割线
css三角形代码：div{width:0;border:10px solid transparent;border-top:10px solid red;}
其中，border是边框属性，transparent是透明色的意思。border-top/left/bottom/right是控制三角形方向的。
注意，盒子一定要是正方形。如果是长方形，那么写出来的就是等腰T形。
为什么正方形写出来的是三角形，而长方形写出来的是等腰T形呢？因为，正方形的中心点到四个底边正好是border的宽度。而长方形的中心点到四个底边的距离有两个底边是和border的宽度相等，有两个底边是大于border的宽度。所以，写出来的是等腰T形。
代码
效果图
2017-01-25
