在web开发中，三角形指示箭头是三角形最常见的日常应用。用CSS实现非常简单。熟悉之后，会比引入SVG或背景图片更灵活的选项。一般来说，三角箭头可以分为两种，一种是视觉上没有边框的，我们称之为实心三角形；底色相同，我们称之为空心三角形。言归正传，说说如何实现。首先说一下三角形的实现原理，熟悉的同学可以跳过这一步。三角形实现原理三角形的实现原理是不设置宽高（即0），只设置边框。如果设置了四个边框的宽度（border-width）、样式（border-style）和颜色（border-color），效果如图：上图是设置了边框的border-width时的效果四个边界是一样的。其实border-width是可以根据需要改变的。将其他三个三角形的border-color设置为透明即可（2017年还需要考虑IE6吗）。这样就形成了一个三角形。实心三角形箭头实心三角形的原理是三角形绝对定位在主要元素的边界并相连。对于语义，我们使用单个标签，三角形用伪类实现。只需将三角形颜色更改为与主要元素相同的背景颜色即可。如下图所示：空心三角形箭头空心三角形的原理是，一个带有边框颜色的三角形绝对定位在主元素的边框上并相连，然后另一个带有主元素背景颜色的三角形是绝对定位并覆盖在第一个三角形上。关键点与第一个三角形相比，第二个三角形的偏移距离等于边框宽度。可能比较晦涩，但是看效果图会比较清楚（为了区分显示，第一个三角形是粉红色的，第二个是白色的）。将第一个三角形的颜色更改为边框颜色，将第二个三角形的颜色更改为背景颜色即可。语义上，我们使用单个标签，两个三角形用before和after伪类实现，因为after伪元素会覆盖before伪元素，所以after伪元素就是第二个三角形。第二个三角定位的偏移距离比较容易被忽略！为了视觉效果和用户体验，我们应该让三角箭头的边框宽度与主元素的边框宽度保持一致。一般有同学可能会认为第二个三角形的偏移值和主元素的边框宽度一样，其实是错误的。与第一个三角形相比，第二个三角形的偏移值应该是主元素边框宽度的“平方根2”倍，约为1.414。为方便起见，可按1.4倍计算。下图是示意图：假设主元素的边框宽度为6px，那么第二个三角形相对于第一个三角形的偏移量应该是6px*1.4=8.4pxOnlinedemo
