title: How to make a right pointed arrow using css
body: <p>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<br/>
  <a href="https://i.imgsafe.org/a83890a9d8.png" rel="nofollow noreferrer">arrow</a></p>
  
  <p>Here's my html code</p>
  
  <pre><code>&lt;div class="arrow"&gt;
     &lt;img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/jjbftxzs/" rel="nofollow noreferrer">FIDDLE</a></p>