【吹き出し】左アイコン吹き出し02-B

下記Beyondコード

JS head

なし

HTML

<div class="balloon_left_02B">
    <div class="faceicon_left_02B">
        <!--画像の入れ替えは下記URL変更もしくは左に表示されている画像を選択した後に上部の画像ボタンからも入れ替え可能-->
        <img class="lazyload" src="https://production.static.squadbeyond.com/uploads/article_photo/photo/631031/65882372-a684-416b-a484-fe55664b6da8.png" draggable="false" height="50" width="50">
        <!--アイコン名が不要な場合は下記１行を削除してください-->

    </div>
    <div class="chatting_left_02B">
        <div class="says_left_02B">
            <p>こちらに文章を追加。色変更もできます。</p>
        </div>
    </div>
</div>

CSS

 .balloon_left_02B {
  width: 100%;
  /*周りの余白。上下｜左右*/
  margin: 1.5em 0;
  overflow: hidden;
  display: flex;
}

 .chatting {
  /*吹き出しの幅を変更する場合、下記autoを削除して20%から100%の値を指定してください*/
  width: auto;
}

 .faceicon_left_02B {
  flex-basis: 55px;
  flex-shrink: 0;
}

 .faceicon_left_02B img {
  width: 55px;
  max-width: 55px;
  height: 55px !important;
  object-fit: cover;
  /*画像周りの線。線の種類｜線の太さ｜線の色*/
  border: solid 3px #3366FF;
  border-radius: 50%;
  box-sizing: border-box;
}

 .name {
  /*アイコン名の文字サイズ*/
  font-size: 10px;
  /*アイコン名の文字の色*/
  color: #3366FF;
  text-align: center;
}

 .says_left_02B {
  display: block;
  position: relative;
  margin: 0 0 0 20px;
  padding: 10px;
  border-radius: 10pt;
  /*ボーダーの色を調整できます、下の.says:afterのborder-rightと色を合わせてください*/
  border: 3px solid#3366FF;
  /*吹き出しの背景色*/
  background: #BAEAFF;
}

 .says_left_02B:before {
  content: "";
  position: absolute;
  top: 24px;
  left: -20px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 10px solid #BAEAFF;
  z-index: 2;
}

 .says_left_02B:after {
  content: "";
  position: absolute;
  top: 24px;
  left: -28px;
  margin-top: -14px;
  border: 14px solid transparent;
  /*ボーダーの色を下記カラーコードで調整できます*/
  border-right: 14px solid #3366FF;
  z-index: 1;
}

 .says_left_02B p {
  margin: 0;
  padding: 0;
  letter-spacing: -0.01em;
}