O código abaixo criará uma seta logo abaixo de um<a> elemento:

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>

O problema é que precisamos indicar a largura do link para obter uma seta de tamanho adequado, porque não podemos indicar a largura da borda em pixels.

Como fazer um triângulo responsivo por cento baseado?