title: Making this CSS arrow box compliant in Safari and IE
body: <p>A friend, produced this code, and I have refined it a little to suit our purposes. As we need white bg with 1px border version as per my fiddle.</p>
  
  <p>However the arrow does not render in Safari and Internet Explorer.</p>
  
  <p>Any suggestions: fiddle: <a href="http://jsfiddle.net/ozzy/vHLJU/2/" rel="nofollow noreferrer">http://jsfiddle.net/ozzy/vHLJU/2/</a></p>
  
  <p>Code: css</p>
  
  <pre><code>    #container{
  position:relative;
  margin:10px;
      }
      .rectangle{
  position:absolute;
  width: 200px; 
  height: 100px; 
  background: #fff;
  border:1px solid #aaa;
      }
     .small-rectangle{
  position: absolute;
  top: 25px; 
  left: 200px; 
  width: 100px; 
  height: 50px; 
  background:#fff;
  border:1px solid #aaa;
  border-left:2px solid #fff; 
      }
     .magicrect{
  position:absolute; 
  top: 0px; 
  left: 200px; 
  width: 99px;
  height: 100px;
  border-right:1px solid #aaa;
  border-left:none;
      }
     .arrow-right{
  position: absolute; 
  top: 0px; 
  left: 300px; 
  width: 0; 
  height: 0; 
  border-top: 50px solid transparent; 
  border-bottom: 50px solid transparent; 
  border-left: 50px solid #fff; 
      }
  </code></pre>
  
  <p>html is:</p>
  
  <pre><code>&lt;div id="container"&gt;
    &lt;div class="rectangle"&gt;&lt;/div&gt;
    &lt;div class="magicrect"&gt;&lt;/div&gt;
    &lt;div class="small-rectangle"&gt;&lt;/div&gt;
   &lt;div class="arrow-right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Should look like this ...
  <img src="https://i.stack.imgur.com/7RPZk.png" alt="enter image description here"></p>