title: Create div with triangle border in css
body: <p>I am trying to create a div with arrow on left and right. No background, only border.  Something like this: </p>
  
  <p><a href="https://i.stack.imgur.com/1jpMy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jpMy.png" alt="enter image description here"></a></p>
  
  <p>I am able to create similar div with filled background color using ::before  and ::after tags. However, only borders is something i am not able to achieve. Can it be done with css only? </p>
  
  <p><a href="https://jsfiddle.net/1g16x8p7/1/" rel="nofollow noreferrer">https://jsfiddle.net/1g16x8p7/1/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="wizard"&gt;
    &lt;a class="item"&gt;
    &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.item {
      display: inline-block;
      padding: 15px;
      padding-left: 25px;
  
      /*default styles*/
      background-color: green;
      position: relative;
    }  
  
  
   .item:before,
  .item:after {
        content: "";
        height: 0;
        width: 0;
        border-width: 15px 0 15px  10px;
        border-style: solid;
  
        position: absolute;
        left: 100%;
        top: 0;
      }
  
  
  .item:before {
            border-color: transparent transparent transparent white;
          left: 0;  
        }
  
  
  .item:after {
          border-color: transparent transparent transparent green;  
        }
  </code></pre>