纯CCS绘制成的三角形箭头图案技术详解

原文，英文

原文，中文

简单的说是利用 边框相互叠加形成的。

比如 一个向上的三角形箭头 三角形 可以这样做。

/* create an arrow that points up */
div.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;  /* left arrow slant */
border-right: 5px solid transparent; /* right arrow slant */
border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
font-size: 0;
line-height: 0;
}

另外tooltips 可以使用:before 和:after伪元素
将2个元素叠加在一起 一个和边框颜色一致，一个和toolstips的背景色一致 ，类似 《这样的叠放在一起。就可以了。