CSS 利用 :before :after 实现三角形箭头

发布于：2020-07-17 最后编辑：2020-07-17 所属分类：前端 阅读次数：3141

说明

:before和:after都属于CSS伪类，而且经常用到。实现三角形箭头的话，可以用元素节点，也可以用这两个伪类，看个人喜好。实现原理也不难理解，就是利用边框接触点互相遮盖的特性来实现。我们可以先看下示意图：
css边框

当我们给四条边框定义不同的颜色时，会发现他们是呈45度角互相遮盖的。那我们要做一个向下的箭头时，只要把左右两个边框颜色设置为透明，同时省略对底部边框的定义（或者设置为0）即可。下面来看下具体代码吧。

代码演示

See the Pen
mdVKRBz by LaoGuo (@75k)
on CodePen.

标签：