CSS FancyBox

a box with a triangle done with just CSS

by aleation

HTML

<div class="dialog">
    <div class="triangleOutline">
        <div class="triangle"></div>
    </div>
    <div class="dialogBox">
        Hello!<br>
        I'm a full CSS fancy dialog box :D
    </div>
</div>

CSS

body{
    font-size: 100%;
    font-family: "Arimo";
    background: #eee;
}

.triangle,
.triangleOutline{
    position:relative;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 7px;
    border-bottom-color: #aaf;
}

.triangleOutline{left: 15px;}

.triangle{
    top: -6px; /* outline's width - 1 */
    left: -7px; /* outline's width */
    border-bottom-color: white;
}

.dialogBox{
    background: white;
    border: 1px solid #aaf;
    padding: 0.75em;
    border-radius: 3px;
    min-height: 1.5em;
    line-height: 1.5em;
}