CSS to create message arrow

Question

The task is with CSS coding only.

I need to create a chat box with an arrow on the left and right side.

Attached image is the reference for the right side. For the left side, an arrow should be on the left-hand side.

<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/

I tried to copy from this http://www.cssarrowplease.com/ and couldnt put right values to look alike — Alaksandar Jesus Gene, Jul 14 '17 at 11:33

score 3 · Accepted Answer · answered Jul 14 '17 at 11:35

.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>

CSS to create message arrow

1 Answers1