title: How do I create this arrow using pure CSS
body: <p>How do I create the following arrow using pure CSS ?<img src="https://i.stack.imgur.com/KfZnA.jpg" alt="enter image description here"></p>
  
  <p>So Far, I have this: </p>
  
  <pre><code>&lt;style&gt;
  
  .halfCircleLeft{
      float:left;
      height:50px;
      width:40px;
      border-radius: 0 90px 90px 0;
      -moz-border-radius: 0 90px 90px 0;
      -webkit-border-radius:  0 90px 90px 0;
      background:green;
  }
  
  &lt;/style&gt;
  &lt;div class="bottom_boxes_section"&gt;
      &lt;div class="halfCircleLeft"&gt;Left&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>