html - css3 圆形聊天气泡，带有右“箭头”和边框

Question

我正在努力创建一个带有聊天气泡的聊天窗格。

我的 HTML 结构：

<div id="container">
  <div class="bubble">

看看这里的一个例子：

小提琴示例在这里

我的问题是我不知道如何将第二个引号“箭头”向右转。

另外，如何添加边框以便它也可以包含“箭头”？

提前致谢。

Answer 1

添加这些

 <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: "";
  }