title: How does one creates inner and outer triangles on a div with pure CSS?
body: <p>I just came across <a href="http://cssarrowplease.com" rel="nofollow noreferrer">CSS Arrow please</a> which helps me creating CSS triangles. However, that's not enough. It only creates an outer arrow, while I would like to create inner triangles as well.</p>
  
  <p><img src="https://i.stack.imgur.com/DEzPZ.png" alt="Target result"></p>
  
  <p>This above was just created within Photoshop. I'm able to create the first able using <a href="http://cssarrowplease.com" rel="nofollow noreferrer">CSS Arrow Please</a>, but then the hard(er) part comes along. How do I create a block that contains both an outer (right aligned) and inner (left-aligned) arrow, where the last one only contains an inner (left-aligned) arrow.</p>
  
  <p>The result of this should be <code>a</code> clickable proces chain. </p>
  
  <p>To create the first one, this is the CSS</p>
  
  <pre><code>.arrow_box:first-child {
      position: relative;
      background: #1abc9c;
      border: 5px solid #16a085;
  }
  
  .arrow_box:first-child:after, .arrow_box:first-child:before {
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  
  .arrow_box:first-child:after {
      border-color: rgba(26, 188, 156, 0);
      border-left-color: #1abc9c;
      border-width: 16px;
      margin-top: -16px;
  }
  .arrow_box:first-child:before {
      border-color: rgba(22, 160, 133, 0);
      border-left-color: #16a085;
      border-width: 23px;
      margin-top: -23px;
  }
  </code></pre>
  
  <p>But then my question rises: How would I create the other two?</p>
  
  <p>Thanks!</p>