Код ниже создаст стрелку прямо под<a> элемент:

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>

Проблема в том, что мы должны указать ширину ссылки, чтобы получить стрелку правильного размера, потому что мы не можем указать ширину границы в пикселях.

Как сделать отзывчивый треугольник на основе процентов?