title: Overflow: hidden property not working for after and before pseudo classes
body: <p>Basically I am trying to create a hexagonal shape, which would have a circle inside it and the extra parts of the circle should be hidden.
  Demo: <a href="https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100" rel="nofollow noreferrer">https://codepen.io/AskSaikatSinha/pen/jwXNPJ?editors=1100</a></p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="radius-rect"&gt;&lt;/div&gt;
    &lt;div class="hex"&gt;
      &lt;div id="hexagon" &gt;
        &lt;div class="semi-cir" &gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS: </p>
  
  <pre><code>#hexagon {
      width: 100px;
      height: 55px;
      background: #0088CD;
      position: absolute;
    border-top: 1px solid #0088CD;
    border-bottom: 1px solid #0088CD;
    border-radius: 2px;
  
  }
  #hexagon:before {
      content: "";
      position: absolute;
      top: -25px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 25px solid #0088CD;
    border-radius: 2px;
  
  }
  #hexagon:after {
      content: "";
      position: absolute;
      bottom: -25px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 25px solid #0088CD;
    border-radius: 2px;
  }
  .semi-cir{
    position: relative;
    left: 10px;
    background-color:#00A9F1;
    height:100px;
    width:100px;
    -webkit-border-radius:75px;
    -moz-border-radius:75px;
    z-index: 1;
    overflow: hidden;
  }
  </code></pre>
  
  <p>The overflow: hidden does not have any effects.</p>