纯 CSS 实现小三角形

最近写 CSS 时正好需要一个小三角形来修饰 tooltip。尝试几种写法都不太满意,因为我的需要的三角形是没有颜色但有边框的,后来果断选择使用 border 实现。

先上效果图:

图1.效果图

没错,这就是我那个写了很久的评论系统(其实是因为偷懒)。

问题思考

开头已经说过,我使用的是 border,但 border 不能设置边框(就是周围那一圈),有什么办法解决呢?

刚开始时,我想不出办法,于是想用特殊符号 结合 text-shadow 实现,但这个三角形太丑了,而且和字体有关,所以这个方案被我舍去了。

后来仔细一想:我可以用两个 border 实现啊,第一个和第二个上下间距为 1px,上面覆盖下面,下面那个颜色为边框颜色,不就可以了。尝试之,果然可以!

代码

因为我有洁癖,就是尽可能少写 HTML,所以三角形功能用的是 CSS 伪类 ::before::after。这样代码会多出几行,其实你们可以将伪类改为元素。

HTML

<div class="tooltip">This is a tooltip.</div>

CSS

.tooltip {
background-color: #fff;
border: 1px solid #eee;
position: relative;
max-width: 300px;
padding: 10px;
}
.tooltip::before {
position: absolute;
color: #eee;
width: 0;
height: 0;
content: '';
border-width: 5px 4px 0;
border-style: solid;
border-left-color: transparent;
border-right-color: transparent;
bottom: -5px;
left: 10px;
}
.tooltip::after {
position: absolute;
color: #fff;
width: 0;
height: 0;
content: '';
border-width: 5px 4px 0;
border-style: solid;
border-left-color: transparent;
border-right-color: transparent;
bottom: -4px;
left: 10px;
}

为了方便显示,这里的 tooltip 的 positionrelative,我在实际使用中是 absolute + JavaScript 计算地址修改 topleft