Создание шестиугольника с маской и рамкой в ​​css3 ⇐ CSS

[Anonymous]

Я пытаюсь создать шестиугольник с радиусом границы, границей и чем-то вроде маски. Примерно так:


Однако я Я немного озадачен «маской» и тем, как мне следует создать эту форму. Было бы лучше экспортировать это в формате SVG, чем делать это с помощью CSS3?
Сейчас у меня есть это:

Код: Выделить всё

Код: Выделить всё

#hexagon {
position: relative;
margin: 1em auto;
width: 10.2em;
height: 17.32em;
border-radius: 1em/.5em;
background: #FF5E5E;
transition: opacity .5s;
cursor: pointer;
border-top: 2px solid black;
border-bottom: 2px solid black;
}

#hexagon:before {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(60deg);  /* IE 9 */
transform: rotate(60deg); /* Firefox 16+, IE 10+, Opera */
border-top: 2px solid black;
border-bottom: 2px solid black;
}

#hexagon:after {
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(-60deg);  /* IE 9 */
transform: rotate(-60deg); /* Firefox 16+, IE 10+, Opera */
border-top: 2px solid black;
border-bottom: 2px solid black;
}

Но даже в этом случае это не очень хорошо, так как углы выглядят немного не так:



Подробнее здесь: https://stackoverflow.com/questions/682 ... er-in-css3