Estou tentando criar dois hexágonos alongados como:

Os principais recursos devem ser:

possibilidade de adicionar um fundo gradientepossibilidade de adicionar uma borda gradienteo texto pode ter duas linhas ou uma linharesponsivo em uma grade de Bootstrap (é bom ter) - os ângulos dos cantos devem ser sempre os mesmos.

De acordo comBotão alongado em forma de hexágono usando apenas um elemento a melhor solução até agora é comohttps://jsfiddle.net/veuc78af/:

/*hexagons*/
 .hexagon {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    min-width: 200px;
    height: 80px;
    margin: 40px auto;
    color: #fd0;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
.hexagon:before, .hexagon:after {
    position: absolute;
    content:'';
    width: 100%;
    left: 0px;
    height: 34px;
    z-index: -1;
}
.hexagon:before {
    transform: perspective(15px) rotateX(3deg);
}
.hexagon:after {
    top: 40px;
    transform: perspective(15px) rotateX(-3deg);
}
/* hexagon Border Style */
 .hexagon.border:before, .hexagon.border:after {
    border: 4px solid #fd0;
}
.hexagon.border:before {
    border-bottom: none;
    /* to prevent the border-line showing up in the middle of the shape */
}
.hexagon.border:after {
    border-top: none;
    /* to prevent the border-line showing up in the middle of the shape */
}
/* hexagon hover styles */
 .hexagon.border:hover:before, .hexagon.border:hover:after {
    background: #fd0;
}
.hexagon.border:hover {
    color: #fff;
}

O principal problema com esta solução é que não é possível criar um plano de fundo gradiente. Portanto, isso não está funcionando no meu caso.

Existe alguma possibilidade de fazer isso?

A plataforma principal deste projeto é o Safari em um iPad2.