bootstrap的三角方向符号实现

实现方法：
用空的内联块，宽度高度都设置成0，其中一边的边框设置成可见，其它三边边框设置成透明，再配合边框宽度，可见的边框就呈现成三角形。

模拟代码：
css部分：

.caret-left > span {
  display: inline-block;
   0;
  height: 0;
  vertical-align: middle;
  margin-bottom: 0.1em;
  border-right: 0.4em dashed;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
}
.caret-left:before {
  content:"";
}
.caret-right > span {
  display: inline-block;
   0;
  height: 0;
  vertical-align: middle;
  margin-bottom: 0.1em;
  border-left: 0.4em dashed;
  border-top: 0.4em solid transparent;
  border-bottom: 0.4em solid transparent;
}
.caret-right:before {
  content:"";
}
.caret-up > span {
  display: inline-block;
   0;
  height: 0;
  vertical-align: middle;
  margin-bottom: 0.1em;
  border-bottom: 0.4em dashed;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
}
.caret-up:before {
  content:"";
}
.caret-down > span {
  display: inline-block;
   0;
  height: 0;
  vertical-align: middle;
  margin-bottom: 0.1em;
  border-top: 0.4em dashed;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
}
.caret-down:before {
  content:"";
}

/* 辅助样式 */
button {
	border-radius: 3px;
	background-color: #FFF;
	border: 1px solid;
	line-height: 2em;
	min- 2em;
}

html部分：

<button class="caret-left"><span></span></button>
<button class="caret-right"><span></span></button>
<button class="caret-up"><span></span></button>
<button class="caret-down"><span></span></button>

效果图：

补充:

用margin-bottom来调整底部偏移偶尔会出现底部的尖角被削掉一点儿，变成棱台形状，换成padding-bottom之后好了。