title: :after and :before not working on mobile browsers
body: <p>Im trying to make a header with a special shape for the mobile browser.<br>
  I got what i wanted on my pc using the :before and :after to get the triangular shapes.
  Though it looks awesome in a pc browser.. so far only the chrome browser on my Samsung Galaxy s2 and s4 gave the desired effect. Even the standard browsers from samsung failed.<br>
  I also tested it on an iphone s4 with no succes in safari aswell as chrome.<br></p>
  
  <p>On all the pages i find on the support for these pseudo selectors, they state there is support in every browser but my testing says otherwise.</p>
  
  <p>My question is, is there no support or is my code wrong?</p>
  
  <p>here is a link to a simple page with the code that i set up.
  <a href="http://foodlogg.net76.net/pseudo.html" rel="nofollow">http://foodlogg.net76.net/pseudo.html</a></p>
  
  <pre><code>*{
    margin: 0px;
    padding: 0px;
  }
  .top {
    background-color:#e50000;
    height:20px;
    width: 93vw;
    text-align: left;
    padding: 5px 0px;
  }
  .top:before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 20px solid transparent;
    border-left: 93vw solid #e50000;
    position: absolute;
    left: 0px;
    top: 30px;
  }
  .top:after{
    content: '';
    width: 0;
    height: 0;
    border-top: 0px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 7vw solid #e50000;
    position: absolute;
    right: 0px;
    top: 0px;
  }
  </code></pre>
  
  <p>Hope you guys can help me with this.</p>