html - css3 圆形聊天气泡，右 'arrow' 和边框

Question

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

我的 HTML 结构:

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

在这里看一个例子:

fiddle example here

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

此外，如何添加边框以使其也包含“箭头”？

提前致谢。

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