前端小技巧（一）：边框写三角形

边框写三角形，这个技能从事前端的小伙伴应该都不陌生，不过大多数都是知其然而不知其所以然，今天我们就来探究一下这里面的原理

随意的在页面上给一个盒子，然后给一个边框来看看

div{
width:100px;
height:100px;
border:10px solid #f00283;
}

这样的一段代码，给到盒子的宽高都是100像素，然后10个像素实线的红色边框，效果图如下，看起来没有什么特别的，好像和三角形也没什么关系



但是当我们把每一条边的颜色改得不一样的时候，就能看出来一些端倪了

div{
width:100px;
height:100px;
border:10px solid #f00283;
border-color: #000 #aaa #333 #999;
}

可以看到，当每一条边的颜色都不一样的时候，每两条边交汇的地方是一个斜角。其实这个斜角一直都存在，只是当我们两条边的颜色一样的时候看不出来而已，曾经也有人在面试的时候问到过这个问题：边框是什么形状的？大家现在可有答案了？

不过从这里来看的话，虽然有一个斜角了，但是和三角形好像还是没有太大的关系啊？不着急，再往下走。当我们把盒子的宽高慢慢的减小，我们可能会发现一些不一样的东西，下图四个盒子的宽高分别是100，80，40，10。



好像可以看到盒子慢慢变小，边框虽然没有发生变化，但是当斜角慢慢靠近的时候，似乎有了一点三角形的痕迹，那么再接着缩小盒子，来看看效果：



看不清楚？ 我们把边框的宽度改大一点试试



可以看到，当宽高为0，四条边框的颜色不一样的时候，边框或者说整个盒子变成了一个由四个三角形所组成的矩形，这是上图的代码：

div{
width:0;
height:0;
border:100px solid #f00283;
border-color: #000 #aaa #333 #999;
}

在这里，我加大了边框的宽度，并且把盒子的宽度和高度都设置为0（当值为0的时候可以不写单位）。这时候三角形已经出来了，但是是四个，而我们通常情况下只需要一个。所以我们可以考虑把其他三条边框如果变成透明的话是不是就只剩下其中一个了呢？

如果我现在需要一个尖角朝上的三角形，那么从这四个三角形里面，貌似只有下面这条边框符合我的需求，所以我需要把上边框，和左右两条边框的颜色都改成透明的。在这里，透明可以用transparent来表示：

div{
width:0;
height:0;
border:100px solid #f00283;
border-color: transparent transparent #333 transparent;
}

得到下图：



可以看到这时候就只剩下一个三角形了，其他的三条边看不见了。看起来这样似乎就完成了，但是我们还需要处理一下兼容性，transparent这个值在IE6下会显示成一个黑色。不过，我们可以用边框的样式来解决，代码如下：

div{
width:0;
height:0;
border:100px solid #f00283;
border-style:dotted dotted solid dotted;
border-color: transparent transparent #333 transparent;
}

这里，我们需要把其他三条边框的样式改成点线，这样在IE6下就能显示透明了。

然后把上面的代码优化一下就好了：

div{
width:0;
height:0;
border-width:100px;
border-style:dotted dotted solid dotted;
border-color: transparent transparent #333 transparent;
}

上面我们已经得到一个等腰的三角形了，基本已经能够满足我们的日常需求，不过总有一些特殊需求，比如一个不规则的三角形？ 或者一个直角三角形？ 或者我们怎么去确定三角形的宽高呢？

从上面的代码可以看出来改变边框的width值可以改变边框的高度，但是同时也改变了边框的宽度，但是我们可以再仔细看看这张图：



单看下面的那个三角形，可以看到这个三角形的底边宽度完全等于左右两条边框的高度之和，这时候我们再回过头来看看我们的代码：

div{
width:0;
height:0;
border-width:100px;
border-style:dotted dotted solid dotted;
border-color: transparent transparent #333 transparent;
}

这段代码里面边框的颜色各不相同，边框的样式也是各不相同，唯独宽度是四条边都是一样的，我们把其他三条边的颜色先还原回来，然后来改一些边框的宽度试试会有什么效果：

div{
width:0;
height:0;
border-width:100px 50px;
border-style:solid;
border-color: #000 #aaa #333 #999;
}

这是当我把边框的上下两条边的宽度为100，左右两条边的宽度为50的时候的样子，如果说光看下面这一条边的话，它的高度没有发生任何变化，但是底边的宽度明显只有100个像素了，这也就证明了上面那句话：单看下面的那个三角形，可以看到这个三角形的底边宽度完全等于左右两条边框的高度之和

那么也就是说左右两边的边框宽度决定了下面这个三角形的宽度，而下面这条边的宽度决定了这个三角形的高度，换成代码也就是：

border-left-width 和 border-right-width决定了这个三角形的宽度，border-bottom-width决定了这个三角形的宽度。我们进一步来看，如果左右两条边的宽度不一样会发生什么呢？



这是当我左边的边框宽度只有10像素，右边的边框宽度为80像素的时候看到的效果，可以发现，这个时候三角形已经变成了一个任意的三角形了，当然，它的宽高还是能算出来的，宽度就是底边的高度，也就是100像素，而宽度是左右两条边框宽度之和，也就是90像素：

div{
width:0;
height:0;
border-width:100px 80px 100px 10px;
border-style:solid;
border-color: #000 #aaa #333 #999;
}

再把其他三条边“隐藏”起来，那么我们将得到一个不规则的三角形：



甚至直角三角形：



这是代码：

div{
width:0;
height:0;
border-width:100px 200px 100px 0;
border-style:dotted dotted solid dotted;
border-color:transparent transparent #333 transparent;
}

其实代码只是一个工具，能做到什么，取决于我们的想法…