Estoy tratando de crear dos hexágonos alargados como:

Las características principales deben ser:

posibilidad de agregar un fondo degradadoposibilidad de agregar un borde degradadoel texto puede ser de dos líneas o de una sola líneasensible en una cuadrícula Bootstrap (agradable de tener): los ángulos de las esquinas deben ser siempre los mismos.

De acuerdo aBotón alargado en forma de hexágono usando solo un elemento la mejor solución hasta ahora es 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;
}

El principal problema con esta solución es que no es posible crear un fondo degradado. Entonces esto no está funcionando en mi caso.

¿Hay alguna posibilidad de hacer eso?

La plataforma principal para este proyecto es Safari en un iPad2.