title: Problems with properly simulate a border to a "ribbon" with css. How do I correct it?
body: <p>After a little quarrel with css I managed to support "ribbons" with minimum IE8 and other browsers. 
  Now I wanted to add a border, but I can not get it.</p>
  
  <p><img src="https://i.stack.imgur.com/VDffW.png" alt="enter image description here"></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="ribbonEX07"&gt;
  &lt;a href="#"&gt;&lt;span&gt;· TITLE·&lt;/span&gt;&lt;/a&gt;
  &lt;div class="ribbonEX07-border"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>    .ribbonEX07 {
      display:inline-block;
      margin-left: 50px;
      border-bottom: 0.2em solid #f2cec2;
      position: absolute;
  }
  
  .ribbonEX07:after {
      content: "";
      float:left;
      border:1.5em solid #faefeb;
      border-right-color: transparent;
  }
  
  .ribbonEX07 span {
      float:left;
      overflow:hidden;
      background:#faefeb;
      color: #cd3301;
      display:inline-block;
      line-height:3em;
      padding:0 1em;
      position: relative;
  }
  
  .ribbonEX07-border{
      position: inherit;
      width: 100%;
      height: 100%;
      z-index: -1;
      border-width: 15px 10px 25px 35px;
      border-top: 30px solid #f2cec2;
      border-right: 10px solid transparent;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/L5H5U/" rel="nofollow noreferrer">http://jsfiddle.net/L5H5U/</a></p>