title: How can I make a pointy arrow with a div in CSS
body: <p>How can I make a pointy arrow in CSS? Not just a triangle but one with a stem, like a traditional arrow that would be fired from a bow?</p>
  
  <p>I'm trying to do it by creating a div container, containing two containers, left and right. The right will contain the triangle, and the left will contain three divs, the centre of which will be colored to create the stem.</p>
  
  <p>Here's my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div class='arrowblock'&gt;
          &lt;div class='arrowright'&gt;&lt;/div&gt;
          &lt;div class='rectcontainer'&gt;
              &lt;div class='rect'&gt;&lt;/div&gt;
              &lt;div class='rect' style='background-color:green'&gt;
              &lt;/div&gt;&lt;div class='rect'&gt;
              &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.rectcontainer {
      height:30px;
      width:100px;
  }
  
  .arrowblock {
      width:130px;
      border-top: 15px solid transparent;
  }
  .arrowright {
  float:right;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 30px solid green;
  }
  .rect {
      width:100px;
      height:10px;
      background-color:transparent;
  }
  </code></pre>
  
  <p>Is there a simpler way to achieve this?</p>