Ich versuche, zwei längliche Sechsecke wie folgt zu erstellen:

Die Hauptmerkmale sollten sein:

Möglichkeit, einen Hintergrund mit Farbverlauf hinzuzufügen Möglichkeit, einen Verlaufsrand hinzuzufügentext könnte zweizeilig oder einzeilig seinresponsive in einem Bootstrap-Grid (schön zu haben) - Eckenwinkel sollten immer gleich sein.

GemäßLängender Knopf in Sechskantform mit nur einem Element die bisher beste lösung ist wiehttps: //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;
}

Das Hauptproblem bei dieser Lösung ist, dass es nicht möglich ist, einen Verlaufshintergrund zu erstellen. Das funktioniert in meinem Fall also nicht.

Gibt es eine Möglichkeit das zu tun?

Die Hauptplattform für dieses Projekt ist Safari auf einem iPad2.