CSS画三角形，箭头

1. border

  css画三角形主要是利用border属性。首先看一下width与height为0情况下的border。

// html代码
<div class="box"></div>
// css代码
.box {
      width: 0;
      height: 0;
      border: 100px solid red;
      border-color: red blue green yellow;
}

  结果如下：

2. 三角形

  由上图可以看出，如果想要一个向下的三角形，只需要保留上边框，把其他三个边框的颜色变透明即可。

// html代码
<div class="box"></div>
// css代码
.box {
      width: 0;
      height: 0;
      border: 100px solid red;
      border-color: red transparent transparent transparent;
}

  结果如下：

向下的三角形
  同样的道理，能够得到向上，向左，向右的三角形。或者通过transfrom属性进行旋转，也可以得到其他三个方向的三角形。
  为什么不删掉其他三个边框？
  如果删掉其他三个边框，上边框就会只有个100px的高度，而没有宽度（宽度要靠左右边框撑起来），进而什么都不会显示。
  上边框的宽度是靠左右边框撑起来的。因此可以删除掉下边框，避免占用页面空间。
  还可以删除左边框，得到一个左侧直角的三角形。同理，能够得到其他三个方向直角的三角形。

// html代码
<div class="box"></div>
// css代码
.box {
      width: 0;
      height: 0;
      border-top: 100px solid red;
      border-right: 100px solid transparent;
}

  结果如下：

左侧直角的三角形.jpg

3. 箭头

   箭头的实现也是利用border。一般来说，有两种方式：
  (1)相连的border旋转实现

// html代码
<div class="box"></div>
// css代码
.box {
      margin-top: 50px;
      width: 100px;
      height: 100px;
      border-top: 10px solid red;
      border-right: 10px solid red;
}

  效果如下：

不旋转的情况

  通过旋转可以得到各个方向的箭头。比如，将其顺时针旋转45度，即可得到右箭头：

// html代码
<div class="box"></div>
// css代码
.box {
      margin-top: 50px;
      width: 100px;
      height: 100px;
      border-top: 10px solid red;
      border-right: 10px solid red;
      transform: rotate(45deg);
}

右箭头

  (2)三角形遮盖实现
  用一个与背景色同色的三角形，盖住另一个三角形的一部分，从而得到箭头。

// html代码
<div class="box"></div>
// css代码
.box {
      position: relative;
      width: 0;
      height: 0;
      border-left: 100px solid red;
      border-top: 100px solid transparent;
      border-bottom: 100px solid transparent;
}
.box:before {
      content: '';
      position: absolute;
      top: -100px;
      left: -120px;
      border-left: 100px solid blue; // 蓝色是为了遮盖红色后比较容易调整位置
      border-top: 100px solid transparent;
      border-bottom: 100px solid transparent;
}

  结果如下：

两个重叠的三角形.jpg
  接着，我们把蓝色的三角形变成白色，就会得到右箭头：
右箭头.jpg
  对右箭头进行旋转操作，即可得到各个方向的箭头。


参考：http://www.divcss5.com/rumen/r50847.shtml