title: How to make this arrow in CSS only?
body: <p>I'm building a wizard-like ordering process where I have this menu:
  <img src="https://i.stack.imgur.com/z5oaY.png" alt="menu"></p>
  
  <p>The active page is colored green (in this case, Model).</p>
  
  <p><strong>How does one make this arrow using only CSS?:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/2Iu6o.png" alt="arrow"></p>
  
  <p>At the moment i'm achieving my goal by using several divs and images:</p>
  
  <pre><code>&lt;div class="menuItem"&gt;
      &lt;div&gt;&lt;/div&gt; &lt;!-- The left image --&gt;
      &lt;div&gt;Varianten&lt;/div&gt;
      &lt;div&gt;&lt;/div&gt; &lt;!-- The right image --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The left image: <img src="https://i.stack.imgur.com/cP7fR.png" alt="enter image description here"></p>
  
  <p>The right image:<img src="https://i.stack.imgur.com/6prAp.png" alt="enter image description here"></p>
  
  <p>I found a SO answer which does part of this:
  <a href="https://stackoverflow.com/questions/16180107/arrow-box-with-css">Arrow Box with CSS</a>, however i'm having trouble with the indent at the left.</p>
  
  <p>If you have a better idea about how to do this, please let me know!</p>