Info-box arrow without extra markup

Works in IE8+, FF and WebKit browsers. Extra markup (#foo in this case) is required so that it can be supported in IE7.

by mihaibirsan

HTML

<div id="bar">
    The quick brown fox jumps over the lazy dog.
    <div id="foo"></div>
</div>

CSS

#bar {
    position: relative;
    background: #dadada;
    width: 100px; height: 100px;
}
/* #bar:after, */
#foo {
    content: " ";
    display: block;
    position: absolute; top: 100%; left: 10px;
    width: 0; height: 0;
    background: transparent;
    border-top: 10px solid #dadada;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    
}