纯css实现一个气泡
HTML
<div id="bubble" class="bubble" style="background-color: rgb(42, 209, 172);"><i style="width: 0px;height: 0px;color: rgb(42, 209, 172);border-width: 14px 15px 8px 0px;border-style: solid;border-color: currentcolor transparent transparent;top: 91%;left: 0px;margin-bottom: 4px;"></i><div class="talk">Q</div></div>
CSS
.bubble
{
position: absolute;
top: 60px;
right: 100px;
/* width: 200px; */
height: 35px;
border-radius: 2px;
background-color: currentColor;
color: #fefefe;
}
.bubble i {
position: absolute;
border-width: 0;
border-style: solid;
border-color: transparent;
}
.bubble .talk {
padding: 0px 20px;
color: #fff;
font-size: 20px;
font-family: none;
}
最后呈现效果
ok,完活,需要的时候直接拿,高效,哈哈哈!