CSS 构造三角箭头

总所周知，在CSS的世界中有很多样式和效果看起来简单实则不那么简单，就比如一个小小的▲符号元件，也是通过指定样式产生的，而并不是开箱即用的产物。

要掌握如何设计一个理想的▲符号元件，我们就必须先深入了解边框border的结构组成。
代码如下：

.frame {
  background-color: #ccc;
  height: 150px;
  width: 130px;
  line-height: 150px;
  text-align: center;
  border: 10px solid;
  border-color: #000 #f00 #0f0 #00f;
}

photo frame

输出结果：

可以明显看见的是四条边框并不是矩形而是梯形，就如同相框的边一样。然而当你只设计了其中一条边框的时候，浏览器会裁去左右多余的小三角形，如同这样：

看到这里其实就很明确了，要设计一个理想的▲符号元件我们可以利用border的性质着手，就像这样：

如上图右下角所示，我们可以将boredr的下方的梯形边裁掉一个平行四边形从而得到一个等腰三角形。具体办法就是首先我们使梯形的上底为0，也就是成为一点，而下底等长缩减，这样就得到了一个等腰三角形。
具体代码思路如下：

效果如下：