Move chat arrow from the left side to the right

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

bubble:before

1 Answer
1

Here is my solution,

You will have to change

border-right-color: #FFFFCC;


to

border-left-color: #FFFFCC;


for before and after

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.