title: Shape with striped background and a triangular cut on top
body: <p>Hello I need to make shape in CSS/HTML5. I pasted it as an image but now I need to make shape like this.</p>
  
  <p>Is there any way to do it? I made something with triangles but it doesn't even look close to this.</p>
  
  <p>SHAPE: <img src="https://i.stack.imgur.com/4RvQo.jpg" alt="enter image description here"></p>
  
  <p>Here is my CSS.</p>
  
  <pre><code>#flag {
    width: 110px;
    height: 56px;
    padding-top: 15px;
    position: relative; 
    background: red;
    color: white;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-align: center;
    text-transform: uppercase;
      float:left;
  }
  #flag:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 25px solid #eee;
    border-left: 55px solid transparent;
    border-right: 55px solid transparent;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="flag"&gt;&lt;/div&gt;&lt;span&gt;SOME TEXT HERE&lt;/span&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/k2ywe9j9/" rel="nofollow noreferrer">JS FIDDLE</a></p>