CSS创建消息箭头

Question

任务仅限于CSS编码。

我需要在左侧和右侧创建一个带箭头的聊天框。

附加图像是右侧的参考。对于左侧，箭头应位于左侧。

<div class="message_wrapper">
 <div class="message">
 Sample Text Message from User A
 </div>
</div>

<div class="message_wrapper right">
 <div class="message">
 Sample Text Message from User B
 </div>
</div>

https://jsfiddle.net/u0e6yhva/1/

Answer 1

.talk-bubble {
  margin: 40px;
  display: inline-block;
  position: relative;
  width: 200px;
  height: auto;
  background-color: blue;
}

.triangle.left-top:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: -20px;
  right: auto;
  top: 0px;
  bottom: auto;
  border: 22px solid;
  border-color: blue transparent transparent transparent;
}

.triangle.right-top:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 0;
    bottom: auto;
    border: 32px solid;
    border-color: blue transparent transparent transparent;
}

.talktext {
  color: white;
  padding: 1em;
}

<div class="talk-bubble triangle left-top">
  <div class="talktext">
    <p>Left flush at the top.</p>
  </div>
</div>

<div class="talk-bubble triangle right-top">
  <div class="talktext">
    <p>Right flush at the top.</p>
  </div>
</div>