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\[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\]html is:\[code\]<div id="container"> <div class="rectangle"></div> <div class="magicrect"></div> <div class="small-rectangle"></div> <div class="arrow-right"></div></div>\[/code\]Should look like this ...
