html - 右の「矢印」と境界線を持つcss3の丸みを帯びたチャットバブル

Question

チャット バブルでチャット ウィンドウを作成するのに苦労しています。

私のHTML構造：

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

ここで例を見てください：

フィドルの例はこちら

私の問題は、2番目の引用符「矢印」を右に回す方法がわからないことです。

また、「矢印」も含めることができるように境界線を追加するにはどうすればよいですか?

前もって感謝します。

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