用CSS做气泡

下午在群里看到迷糊的一个问题,其实是很简单的一个问题,就是…………这个东西
截图
喔,这不就是用border去做一个三角形嘛,有何难~确实不难,然而有人不会啊
其实就算不会,这么大众的东西,百度一下就有了,既然有人问了,我也就撸了一个demo出来了。过程就不说了。

原理就是:第二个三角形覆盖第一个三角形,调整位置留出一定的边框。

相关的代码如下

1
2
3
4
<div class="bubble">
<div class="bubble-arrow"></div>
<div class="bubble-arrow-inner"></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.bubble {
width: 100px;
height: 100px;
font-size: 20px;
background: #fff;
border: 2px solid #000;
position: relative;
}


.bubble-arrow {
border-color: transparent transparent transparent #000;
border-width: 10px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
top: 50%;
right: -22px;
margin-top: -10px;
}


.bubble-arrow-inner {
border-color: transparent transparent transparent #fff;
border-width: 10px;
border-style: solid;
width: 0;
height: 0;
position: absolute;
top: 50%;
right: -19px;
margin-top: -10px;
}

话外音:
在群里聊天的时候,菊花哥 分享了他的 终极版
哝,就是这玩意~这次的分享就到这里咯~~666666