How to make a right pointed arrow using css - css

Question

I'm creating some custom shapes using CSS I want to draw an arrow whose pointer is on the right side and is aligned left to the div I actually made an arrow which pointer was to the left but I'm having difficulty in making an arrow whose pointer is on right side.
Here's a picture of how I want it
arrow
Here's my html code
<div class="arrow">
<img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>
css
.arrow {
position: relative;
}
.arrow::after {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
border-style: solid;
border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;
bottom: 45px;
}
FIDDLE

Answer 1

You just needed to swap the left/right values of your border rules to make the arrow face the opposite direction.
Change this:
border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;
To this:
border-width: 18px 0 18px 30px;
border-color: transparent transparent transparent #fff;
And then to match your example image, I changed the 30px side to also be 18px, forming an equilateral triangle.
.arrow {
position: relative;
}
.arrow::after {
position: absolute;
content: '';
width: 0;
height: 0;
left: 0;
border-style: solid;
border-width: 18px 0 18px 18px;
border-color: transparent transparent transparent #fff;
bottom: 45px;
}
<div class="arrow">
<img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>

Answer 2

Take a look here I did it (and made arrow in red so it will be easier to see):
.arrow {
position: relative;
padding: 20px;
}
.arrow::after {
position: absolute;
z-index: 200;
content: '';
width: 0;
height: 0;
left: 20px;
border-style: solid;
border-width: 22px 0 22px 17px;
border-color: transparent transparent transparent red;
bottom: 62px;
}