CSS Arrow Down

HTML

<div class="arrow">
    <p></p>
</div>

CSS

.arrow {
    width:0px;
    height:0px;
    left:100px;
    top:200px;
    position:relative;
    }
.arrow:after,
.arrow:before {
    bottom:0%;
    left:0%;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:absolute;
}
.arrow:after {
    bottom:6px;
    left:0px;
    border-top-color:#FFF;
    border-width:12px;
    margin-left:-12px;
}
.arrow:before {
    border-top-color:#000;
    border-width:15px;
    margin-left:-15px;
}