popup-shadow-gridient-arrow.css

body {
    padding:100px;
}

/* Tooltip block */
.tooltip {
    font-size: 12px;
    color:#FFF;
    
    position:relative;
    width:300px;
    padding:20px;
    margin:20px;
    
    border: 1px solid #186F8F;
    
    -moz-border-radius:     15px;
    -webkit-border-radius:     15px;
    border-radius:             15px;
    
    background-color:#35acd7;

    background-image: -moz-linear-gradient(        #29A2CE 0%, #3ABAE6 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #29A2CE), color-stop(100%, #3ABAE6));
    background-image: -webkit-linear-gradient(    #29A2CE 0%, #3ABAE6 100%);
    background-image: -o-linear-gradient(        #29A2CE 0%, #3ABAE6 100%);
    background-image: -ms-linear-gradient(        #29A2CE 0%, #3ABAE6 100%);
    background-image: linear-gradient(            #29A2CE 0%, #3ABAE6 100%);
    
    -moz-box-shadow:    0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
    -webkit-box-shadow:    0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
    box-shadow:            0 1px 0 #7FD2F1 inset, 0 0 7px 4px #666;
}

/* Common rules for all arrows */
.tooltip:before,
.tooltip:after {
    content:"\2666";
    font-family: monospace;
    font-size:50px;
    line-height:52px;
    text-align:center;
    
    position:absolute;
    overflow:hidden;
    width:50px;
    height:50px;

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.tooltip:before {
    color:#186F8F;
}
.tooltip:after {
    color:#35acd7;
}


/* Left arrow */
.leftArrow:before,
.leftArrow:after {
    top:50%;
    left:-25px;
    margin-top:-25px;
    clip:rect(0px, 25px, 50px, 0px);
}
.leftArrow:before {
    -moz-text-shadow:    -4px 0px 6px #666;
    -webkit-text-shadow:-4px 0px 6px #666;
    text-shadow:        -4px 0px 6px #666;
}
.leftArrow:after {
    left:-24px;
}

/* Right arrow */
.rightArrow:before,
.rightArrow:after {
    top:50%;
    right:-25px;
    margin-top:-25px;
    clip:rect(0px, 50px, 50px, 25px);
}
.rightArrow:before {
    -moz-text-shadow:    4px 0px 6px #666;
    -webkit-text-shadow:4px 0px 6px #666;
    text-shadow:        4px 0px 6px #666;
}
.rightArrow:after {
    right:-24px;
}

/* Top arrow */
.topArrow:before,
.topArrow:after {
    left:50%;
    top:-25px;
    margin-left:-25px;
    clip:rect(0px, 50px, 25px, 0px);
}
.topArrow:before {
    -moz-text-shadow:    0 -4px 6px #666;
    -webkit-text-shadow:0 -4px 6px #666;
    text-shadow:        0 -4px 6px #666;
}
.topArrow:after {
    top:-24px;
    color:#29A2CE;
}

/* Bottom arrow */
.bottomArrow:before,
.bottomArrow:after {
    left:50%;
    bottom:-25px;
    margin-left:-25px;
    clip:rect(25px, 50px, 50px, 0px);
}
.bottomArrow:before {
    -moz-text-shadow:    0 4px 6px #666;
    -webkit-text-shadow:0 4px 6px #666;
    text-shadow:        0 4px 6px #666;
}
.bottomArrow:after {
    bottom:-24px;
    color:#3ABAE6;
} ​