CSS实现空心三角指示箭头

web开发中，三角形的平常应用，以三角形指示箭头最为常见，其用CSS来实现很是简单，熟悉了以后相比于引入SVG或是背景图片会是更好更灵活的选择。

而三角箭头通常而言，又分为两种，一种是视觉上没有边框的，咱们叫作实心三角形；还有一种是视觉上有边框的，而三角箭头刨去边框的部分又要与主体元素的背景颜色一致，咱们叫作空心三角形。

言归正传，讲一下怎样实现的。

首先，讲一下三角形的实现原理，熟悉的同窗能够跳过这一步。

三角形实现原理

三角形的实现原理是宽高都不设置（即为0），只设置边框，若是四个边框都设置宽度（border-width）、样式（border-style）和颜色（border-color），效果如图：

上面是四个边框border-width同样时的效果，其实border-width是能够本身根据需求来变化的，以下图效果：

上面看到的都是四个三角形，其实想实现单个的三角形只需把其余三个三角形的border-color设置为透明色transparent就能够了（2017年还用考虑IE6吗）。

这样就实现三角形了。

实心三角形箭头

实心三角形的原理就是一个三角形绝对定位到主体元素边界处并链接起来。

为了语义化，咱们用单标签，三角形用伪类来实现。

把三角形颜色换成和主体元素一致的背景色就能够了。以下图：

空心三角箭头

空心三角形的原理就是一个边框颜色的三角形绝对定位到主体元素边界处并链接起来，而后另外一个主体元素背景色的三角形绝对定位并覆盖到第一个三角形上面，关键的一点是第二个三角形相较于第一个三角形定位上偏移的距离应等于边框宽度。

说得可能比较晦涩，看效果图会更清楚明白（为了区分显示，第一个三角形用的粉色，第二个白色）

把第一个三角形颜色换成边框颜色，第二个三角形颜色换成背景颜色就能够了。

为了语义化，咱们使用单标签，两个三角形用before和after伪类来实现，由于after伪元素会覆盖before伪元素，因此after伪元素就是第二个三角形。

第二个三角形定位的偏移距离

这是比较容易被忽略的一点！

为了视觉效果，也为了用户体验，咱们应该将三角箭头的边框宽度和主体元素的边框宽度保持一致。

通常可能会有同窗认为第二个三角形的偏移值和主体元素边框宽度同样，实际上是不对的。

第二个三角形相较于第一个三角形的偏移值其实应该是主体元素边框宽度的"根号2"倍，约为1.414，为了方即可以按1.4倍计算。

下图是原理图：

假设主体元素边框宽度为6px，因此第二个三角形相较于第一个三角形的偏移量应为6px*1.4 = 8.4px

在线demo

本文首发于我的博客yoowin.me，欢迎访问！