CSS绘制三角形原理剖析

首先，从对border的应用开始，以前一直以为边框是矩形的，其实不然，如下：

.border {
  width:50px;
  height:50px;
  border: 2px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; 
}

当我们增大border值时：

.border {
  width:50px;
  height:50px;
  border: 20px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}

可以明显的看出，border的每一条边是矩形的。

现在试想一下，我们把元素的长和宽都设置为0px，边框的值不变，我们用极限的原理解释，每一边的边框将会由梯形变成三角形，来试验一下：

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;
}

那么现在我们对如何绘制三角形就有一个思路：把其他三边的边框的border-color值设为transparent，即可得到一个三角形。

下三角：

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: #ADFF2F transparent transparent transparent;
}

左三角：

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: transparent #BA55D3 transparent transparent;
}

上三角：

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: transparent transparent #F4A460 transparent;
}

右三角：

.border {
  width:0px;
  height:0px;
  border: 20px solid;
  border-color: transparent transparent transparent #FF0000;
}

 

注意border-color属性值的顺序：

border-color:red green blue pink;

• 上边框是红色
• 右边框是绿色
• 下边框是蓝色
• 左边框是粉色