Question

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.

However the arrow does not render in Safari and Internet Explorer.

Any suggestions: fiddle: http://jsfiddle.net/ozzy/vHLJU/2/

Code: css

    #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; 
    }

html is:

<div id="container">
  <div class="rectangle"></div>
  <div class="magicrect"></div>
  <div class="small-rectangle"></div>
 <div class="arrow-right"></div>
</div>

Should look like this …

Answer 1

You can create a masked triangle to go behind the actual one as seen in this example:

http://jsfiddle.net/BqGyU/

Basically the concept is to create two triangles. It appears the original concept was to have a white triangle (using a border to create it) on an off color background. This is fine, but when you want a border around that, you can’t use the border property. To get around this you can create another triangle under it with the border color. This is then off set to give the effect of a border.

.arrow-right-top{
    position: absolute; 
    top: 1px; 
    left: 300px; 
    width: 0; 
    height: 0; 
    border-top: 49px solid transparent; 
    border-bottom: 49px solid transparent; 
    border-left: 49px solid #fff; 
}
.arrow-right-bottom{
    position: absolute; 
    top: 0px; 
    left: 300px; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 50px solid #aaa;
}