使用CSS实现聊天气泡
.div {
background-color: yellow;
width: 150px;
height: 100px;
border-radius: 10px;
margin-top: 50px;
box-shadow: 5px 5px 10px #888888;
}
.div::after{
content: '';
width: 0;
height: 0;
border: 20px solid;
border-color: yellow transparent transparent transparent;
position: relative;
top: 120px;
left: 30px;
}
效果预览
实现原理
概述:使用一个 div 模拟气泡矩形,并给它添加 div::after(或者 div::before)伪元素实现小三角。其中小三角的实现使用“宽高为0、border为20px、3边框透明”的伪元素样式实现.
原理详见:CSDN - 如何画一个对话气泡框(css实现)
为什么“宽高为0、border为20px、3边框透明”的伪元素样式能展示一个小三角?
下面用一个动画来演示。(拉动控制条来调整伪元素的宽高, 调整到0后可以勾选“隐藏多余边框”)
← Previous Post
Next Post →