用css伪类制作三角形的三种方法（转载）

第一种：一个90度的“ > ”,　　只有线条。（可以做下拉框的箭头之类的） 例如：

.next:after{
   content: "";
    width: 6px;
    height: 6px;
    border-left: 1px solid #666;
    border-bottom: 1px solid #666;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    position: absolute;
    right: 9px;
    top: 20px;
}

第二种：带颜色的。例如：

.next:after{
    position: absolute;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid #f5f5f5;
    content: " ";
    display: block;
    width: 0;
    height: 0;
    top: -8px;
    left: 20px;
  }

第三种：线条+颜色。原理，用两个不同颜色的伪类重叠。

例如：

.pos_rel {
   position: relative;
   _line-height: 0;
}

.pos_rel .icon1 {
  display: block;
  border-width: 9px 9px 9px 0;
  border-color: transparent #1c7ecf transparent transparent;
  border-style: solid;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.pos_rel .icon2 {
  display: block;
  border-width: 9px 9px 9px 0;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
  position: absolute;
  left: 4px;
  top: -9px;
  width: 0;
  height: 0;
}

从此处来