增加画三角形的功能

[Justineo]

目前搞了一下，生成的效果如下，只支持直角三角形（兼容 IE）。 http://jsbin.com/koviyoke

如此调用：

/**
 * @direction 方向 top / top-right / right / bottom-right / ...
 * @color 颜色
 * @size 直角边长度
 */
.triangle(@direction, @color, @size);

用的 border 实现，没有用伪类，不支持额外边框颜色。如果两条直角变需要额外的边框色，可以用伪元素生成两个三角形叠加。

如果没啥问题准备加到 1.3.0 里面。

[Justineo]

比如 GitHub 评论的右侧三角，可以这样：

.comment {
  position: absolute;
  background-color: #F7F7F7;
  border: 1px solid #DDD;

  &:before,
  &:after {
    content: "";
    position: absolute;
  }

  &:before {
    top: 10px;
    left: -15px;
    z-index: -1;
    .triangle(left, #DDD, 12px);
  }

  &:after {
    top: 11px;
    left: -13px;
    .triangle(left, #F7F7F7, 10px);
  }
}

效果如下：

后面可以考虑整个效果再抽一下。

[zmmbreeze]

大多数场景下，这个三角样式都是绝对定位的。可以修改为绝对定位，然后用负margin把“上下左右”方向的三角的最长边的中点移动到元素原来的中心点。这样可以确保所有三角的中心点都是最长边的中点。

[Justineo]

有道理，可以改一下。

[otakustay]

@DDDBear 看一下我们各系统中有需要三角的场景能不能使用这个

[Justineo]

@zmmbreeze 更新了一下，支持传一个 @origin 参数，corner 就定位在直角顶点，side 定位在斜边中点。 http://jsbin.com/koviyoke/

不过这玩意儿计算的时候会有小数，所以实际效果还是要自己微调一下的，@size 越小越容易跑偏。

[zmmbreeze]

@Justineo :+1: