[css]纯css绘制三角形

入门
如题，使用纯css绘制三角形，避免使用图片或者svg canvas等绘制。

原理是通过绘制border边框来实现，边框颜色默认是透明transparent 而三角形的方向向哪一边（top, right, bottom, left），就设置哪一边的边框颜色。
比如图片上的这个给它设置css属性：

border: 10px solid transparent;
border-bottom-color: red;

这样就获得了一个向上的等腰三角形，注意不要设置它的width或者height，想要调整三角形的大小请设置它的border-width
比如border-left-width border-right-width

border: 10px solid transparent;
border-top-color: red;
border-left-width: 12px;
border-right-width: 12px;

进阶1

实现一个这样的效果

可以看到是一个矩形圆角边框外加一个箭头，聪明的你一定想到了用上面的方式来绘制三角形，然后自己设置矩形的border-radius来实现。
但是这个图形是有边框颜色的，而我上面绘制三角形本身就是用边框实现的，是纯色的。根本没法用来绘制，所以我们也不需要用上面的border方法来绘制三角形

其实我们可以把它理解成一个圆角矩形外加一个旋转45°的正方形是不是就很容易来绘制了。

只需要让正方形的border-bottom border-right transparent透明就可以了

border: 1px solid #478a03;
border-bottom-color: transparent;
border-right-color: transparent;
transform: rotate(45deg);
background: #25282d;