CSS3 Arrow with Drop Shadow

An example that renders a CSS3 arrow with a drop shadow.

HTML

<div class="box">I'm a big beautiful box!</div>
<div class="arrow"></div>

CSS

/* Center content in the middle of the screen */
html, body, div{
    height: 100%; 
    width: 100%; 
    margin: 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-pack:center;
    -webkit-box-align:center;
}

/* Make a box that fills 50% of screen */
.box{
    background-color: pink;
    width: 50%;
    height: 50%;
    border-radius: 25px;
    box-shadow: 3px 3px 4px #000;
}

/* Make an arrow */
.arrow{
    background-color: pink;
    box-shadow: 3px 3px 4px #000;
    width: 30px;
    height: 30px;
    
    /* Translate the box up by width / 2 then rotate */
    -webkit-transform: translateY(-15px) rotate(60deg);
}