Drawing arrows in CSS3

by karim79

HTML

<div class="arrowContainer">
    <div class="arrow"></div>
    <div class="arrowHead"></div>
</div>

CSS

div.arrowContainer {
    background: yellow;
    width: 200px;
    height: 200px;
    position: relative;       
}

div.arrow {
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 110px;
    height: 14px;
    background: black;    
}

div.arrowHead {
    position: absolute;
    right: 75px;
    top: 46%;
    width:0px; 
    height:0px; 
    border-bottom:15px solid transparent;  /* left arrow slant */
    border-top:15px solid transparent; /* right arrow slant */
    border-left:15px solid #2f2f2f; /* bottom, add background color here */
    font-size:0px;
    line-height: 0px;
}