Triángulo CSS sensible con ancho de porcentaje

El siguiente código creará una flecha justo debajo de un<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>

El problema es que tenemos que indicar el ancho del enlace para obtener una flecha de un tamaño adecuado porque no podemos indicar el ancho del borde en píxeles.

¿Cómo hacer un triángulo receptivo basado en porcentaje?