css实现小三角

在很多地方我们可以用得上小三角，接下来我们画一下四个方向的三角形

triangle {
  /* 基础样式 */
  border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
  border-top-color: green;
}
/*上*/
.triangle.top {
  border-bottom-color: green;
}
/*左*/
.triangle.left {
  border-right-color: green;
}
/*右*/
.triangle.right {
  border-left-color: green;
}

可以看出画一个小三角非常简单，只要两行样式就可以搞定，对于方向只要想着画哪个方向则设置反方向的样式属性就可以