Move chat arrow from the left side to the right

Question

I am using this snippet from JSFiddle And I am having trouble moving the arrow from the left side to the right.

I tried modifying bubble:before and I got the arrow to switch to the right. But I am having issues now reflecting it! Thank you

Answer 1

Here is my solution,

You will have to change

 border-right-color: #FFFFCC;

to

 border-left-color: #FFFFCC;

for before and after

Also change

right:100% to left: 100%;

for

 .bubble-r:after,
 .bubble-r:before 

For more info on how CSS traingle works, refer this codepen animation

Animation to Explain CSS Triangles

.bubble {
  position: relative;
  background: #FFFFCC;
  border: 1px solid #FFCC00;
  max-width: 250px;
  padding: 10px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
}

.bubble:after,
.bubble:before {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.bubble:after {
  border-color: rgba(255, 255, 204, 0);
  border-right-color: #FFFFCC;
  border-width: 15px;
  margin-top: -15px;
}

.bubble:before {
  border-color: rgba(255, 204, 0, 0);
  border-right-color: #FFCC00;
  border-width: 16px;
  margin-top: -16px;
}

.bubble-r {
  position: relative;
  background: #FFFFCC;
  border: 1px solid #FFCC00;
  max-width: 250px;
  padding: 10px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
}

.bubble-r:after,
.bubble-r:before {
  left: 100%;/*change this from right to left*/
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.bubble-r:after {
  border-color: rgba(255, 255, 204, 0);
  border-left-color: #FFFFCC;/*change this from right to left */
  border-width: 15px;
  margin-top: -15px;
}

.bubble-r:before {
  border-color: rgba(255, 204, 0, 0);
  border-left-color: #FFCC00;/*change this from right to left*/
  border-width: 16px;
  margin-top: -16px;
}

<div class="bubble">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna ornare, ullamcorper mi et, eleifend nunc.<br><br>Maecenas rutrum metus vitae ipsum porttitor finibus.
</div>
<br/>

<div class="bubble-r">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu magna ornare, ullamcorper mi et, eleifend nunc.<br><br>Maecenas rutrum metus vitae ipsum porttitor finibus.
</div>