CSS: Отзывчивый удлиненный шестиугольник с текстом и градиентным фоном / рамкой
Я пытаюсь создать два вытянутых шестиугольника в виде:
Основными функциями должны быть:
возможность добавить градиентный фонвозможность добавить градиентную границутекст может быть двухстрочным или однолинейнымотзывчив в Bootstrap-grid (приятно иметь) - углы углов должны быть всегда одинаковыми.В соответствии сУдлиненная кнопка в форме шестиугольника с использованием только одного элемента лучшее решение до сих пор, какhttps://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;
}
Основная проблема с этим решением состоит в том, что невозможно создать градиентный фон. Так что это не работает в моем случае.
Есть ли возможность сделать это?
Основной платформой для этого проекта является Safari на iPad2.