我正在努力创建一个带有聊天气泡的聊天面板。
我的 HTML 结构:
<div id="container">
<div class="bubble">
在这里看一个例子:
我的问题是我不知道如何将第二个引号“箭头”向右转。
此外,如何添加边框以使其也包含“箭头”?
提前致谢。
最佳答案
添加这些
<div class="arrowright"></div>
.arrowright
{
background: #2C2C2C;
font-size: 12px;
position: relative;
width: 1em;
height: 1em;
margin-left: -0.7em;
}
.arrowright::before {
bottom: -0.666em;
left: 0.8em;
position: absolute;
border-left: 1.2em solid #2C2C2C;
border-top: 1.2em solid rgba(44, 44, 44, 0);
border-bottom: 1.2em solid rgba(44, 44, 44, 0);
content: "";
}
关于html - css3 圆形聊天气泡,右 'arrow' 和边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13800934/