css：border trick

迁移几年前在其他地方写的一个微不足道的小文章。

今天做了一个小小的 demo 是基于 jq 和 css3 的一个图片的折角和遮罩动效。demo里面使用到了border这个知识点，因为 border 是具有可动画性的（就是可以支持过渡等等。 用 border 就可以非常方便的做出折角动效，而不需要使用其他 图片作出三角形，通过 border 写出一个三角形。由此引发了一些小测试，在开始之前，先温习了一下 border。

其实从上面的 gif 图有获取到小小的启发呢。所有的 div 的宽高置为 0，此时的 div 的大小由边框控制，我们可以看到边框是从内向外展开的。所以看起来都是三角形。为了各位可以看清楚，特地截了一张静态的。

代码如下：

可以发现上面的图之所以会有黑色的部分，都是在基础的 borders 类里面写了一个

border: 20px solid white;

那如果不给其中一条边设置边框呢？我重新做了一个实验，为了实验结果比较明显，我给每个 border 不同的颜色。

1. 不给剩余边设置边框：

2. 给剩余的边设置边框，且将颜色设置为黑色。

可以从上图对比看出，加入你没有给出四个边框的基础值，不设置某一条边的边框值，那么这个边上会被整个裁减掉。

简单描述了一下 border 的一些小技巧，希望对你有帮助。