Tooltip Arrows

by Brodingo

HTML

<h3>Tooltip arrow using pseudo element border trick</h3>
<br>
<a class="border-arrow" href="#"></a>
<br><br>
<h3>Tooltip arrow using pseudo element css gradient and transform</h3>
<br>
<a class="box-arrow" href="#"></a>
<br><br>
<a class="yella-arrow" href="#"></a>
<br><br>
<a class="inset-arrow" href="#"></a>
<br><br>

CSS

body {
    padding: 20px;
    background-color: #aaa;
    color: #fff;
    font-family: sans-serif;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
}

.border-arrow {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);
       -moz-box-shadow: 0 1px 4px rgba(0,0,0,.5);
            box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.border-arrow:after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    display: block;
    border: 10px solid transparent;
    border-top-color: #ddd;
    margin-left: -10px;
}

.box-arrow {
    position: relative;
    display: block;
    width: 100px;
    height: 100px;
    background-color: #ddd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
    background-image: -webkit-linear-gradient(top, #fff, #ddd);
    background-image:    -moz-linear-gradient(top, #fff, #ddd);
    background-image:     -ms-linear-gradient(top, #fff, #ddd);
    background-image:      -o-linear-gradient(top, #fff, #ddd);
    background-image:         linear-gradient(top, #fff, #ddd);
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5);
       -moz-box-shadow: 0 1px 4px rgba(0,0,0,.5);
            box-shadow: 0 1px 4px rgba(0,0,0,.5);
}

.box-arrow:after {
    content: ' ';
    position: absolute;
    bottom: -10px;
    left: 50%;
    display: block;
    width: 20px;
    height: 20px;
    background-image: -webkit-gradient(linear, left top, right bottom, from(transparent), color-stop(.5,...