css3用右箭头和边框圆形聊天气泡

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