title: Pure css pop up design
body: <p>How to create the pop up box as shown below in image with pure css</p>
  
  <p><img src="https://i.stack.imgur.com/eoAIf.jpg" alt="enter image description here"></p>
  
  <p>Here is what I have made with position:absolute which works fine but what I am trying to get is, is it possible to do only with one div by using <code>:after</code> or <code>:before</code> pseudo classes?</p>
  
  <pre><code>.pop{
      background:#333;
      display:inline-block;
      width:250px;
      height:120px;
      border-radius:8px;
      position:relative;
      margin-top:25px
  }
  span{
      position:absolute; 
      left:0; 
      top:-20px;
      color:white;
      display:inline-block;
      border-radius:8px 8px 0 0;
      background:#333; 
      padding:6px;
      width:100px
  }
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/Cup5Y/14/" rel="nofollow noreferrer">Fiddle</a></strong></p>