Der folgende Code erstellt einen Pfeil direkt unter einem<a> Element:

JSFiddle

.btn {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
}
.btn:after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    height: 0;
    border-width: 10px 50px 0 50px;
    border-style: solid;
    border-color: gray transparent transparent transparent;   
}

<a href="#" class="btn">Hello!</a>

Das Problem ist, dass wir die Linkbreite angeben müssen, um einen Pfeil mit der richtigen Größe zu erhalten, da wir die Rahmenbreite nicht in Pixel angeben können.

Wie macht man ein reaktionsfähiges Dreieck prozentual?