Могу ли я воспроизвести это изображение, используя только html и css - в частности, форму и ребра?

Question

Я хотел бы воспроизвести изображение ниже, используя только html и css, если это возможно. Я бы хотел использовать это как «значок» с меняющимися значками и цветами. Статическое изображение не будет работать для меня:

Все кажется выполнимым, но я не знаю, как воспроизвести реальную форму самого знака (зеленая часть). Есть ли какая-то конкретная директива css, которую мне нужно изучить, чтобы достичь этого?

РЕДАКТИРОВАТЬ: Появляется беспокойство «Дублирующийся вопрос». Обратите внимание, что связанный с вопросом НЕ включает изображение или текст в центре шестиугольника, это делает. Это добавляет немного сложности в проблему и, следовательно, новый вопрос. Основываясь на ответах в этом вопросе, я смог сформулировать лучший поиск в Google и наткнулся на код, который отлично работал для меня. Я голосую за повторное открытие вопроса.

Answer 1

Да возможно, но лучше, если вы используете SVG Вот пример. с закругленным углом

body{margin:0;} 
 
.hexagon { 
 
    width: 120px; 
 
    height: 60px; 
 
    position: relative; 
 
    margin:50px 10px; 
 
} 
 
.hexagon, .hexagon:before, .hexagon:after { 
 
    background: green; 
 
    border-radius: 5px 
 
} 
 
.hexagon:before, .hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 23px; 
 
    width: 74px; 
 
    height: 70px; 
 
    -moz-transform: rotate(145deg) skew(22.5deg); 
 
    -webkit-transform: rotate(145deg) skew(22.5deg); 
 
    transform: rotate(145deg) skew(22.5deg); 
 
} 
 
.hexagon:before { 
 
    top: -35px; 
 
} 
 
.hexagon:after { 
 
    top: 35px; 
 
} 
 
.hexagon span { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 120px; 
 
    height: 70px; 
 
    background:green; 
 
    z-index: 1; 
 
}

<div class="hexagon"><span></span></div>

Answer 2

CSS Tricks имеет отличную страницу по фигурам, more here, и вот как я выполнил бы то, что вы хотите, вместо текста, который у меня есть в форме div, замените своим шрифтом значка выбора и его html и css (игнорировать Верхнее поле я добавил к шестиугольника, это только там, так что вы можете увидеть все это:.

#hexagon { width: 100px; height: 55px; background: red; position: relative; margin-top: 3em; line-height: 55px; text-align: center; color: white;} 
 

 
#hexagon:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid red; } 
 

 
#hexagon:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid red; }

<div id="hexagon">X THING</div>