Сделать форму шестиугольника с границей, закругленными углами и прозрачный фоном

Question

я хочу сделать шестиугольную форму с границей, закругленными углами и прозрачный фон в CSS3, как на этой картинке:

Я не могу сделать это округлые углы и границы.

Мой код здесь:

#hexagon-circle { 
 
    position: relative; 
 
    margin: 1em auto; 
 
    width: 10em; 
 
    height: 17.32em; 
 
    border-radius: 1em/.5em; 
 
    background: red; 
 
    transition: opacity .5s; 
 
    cursor: pointer; 
 
} 
 
#hexagon-circle: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 */ 
 
} 
 

 
#hexagon-circle: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 */ 
 
}

<div id="hexagon-circle"></div>

Answer 1

шестиугольник с закругленными углами сложной формы для создания и я обычно рекомендую использовать SVG для их создания. Необходимость прозрачного фона делает его еще более подходящим для SVG. С помощью SVG вы можете лучше контролировать форму, ее кривые и т. Д., И вам не нужно добавлять много лишних элементов в свою разметку.

Все, что необходимо для создания этой формы с помощью SVG, состоит в том, чтобы использовать один элемент path вместе с несколькими командами L (линия) и A (дуга). Команда L (линия) в основном рисует линию от точки 1 до точки 2, тогда как команда A (дуга) рисует дугу указанного радиуса (первые два значения сразу после команды A).

Подробнее о элементе SVG path и его командах можно узнать в this MDN tutorial.

svg { 
 
    height: 200px; 
 
    width: 240px; 
 
} 
 
path { 
 
    stroke: #777; 
 
    fill: none; 
 
} 
 

 
body { 
 
    background: black; 
 
}

<svg viewBox='0 0 120 100'> 
 
    <path d='M38,2 
 
      L82,2 
 
      A12,12 0 0,1 94,10 
 
      L112,44 
 
      A12,12 0 0,1 112,56 
 
      L94,90  
 
      A12,12 0 0,1 82,98 
 
      L38,98 
 
      A12,12 0 0,1 26,90 
 
      L8,56 
 
      A12,12 0 0,1 8,44 
 
      L26,10 
 
      A12,12 0 0,1 38,2' /> 
 
</svg>

Если вы все еще хотите использовать CSS, вы можете использовать подход, используемый в jbutler483this fiddle из его. (Я приложил код с этой скрипки также в этот ответ, чтобы избежать проблем ссылки гнили)

.roundHex { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    background: transparent; 
 
    border-radius: 10px; 
 
    height: 300px; 
 
    width: 180px; 
 
    box-sizing: border-box; 
 
    transition: all 1s; 
 
    border: 10px solid transparent; 
 
    border-top-color: black; 
 
    border-bottom-color: black; 
 
} 
 
.roundHex:before, 
 
.roundHex:after { 
 
    content: ""; 
 
    border: inherit; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: -10px; 
 
    background: inherit; 
 
    border-radius: inherit; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.roundHex:before { 
 
    transform: rotate(60deg); 
 
} 
 
.roundHex:after { 
 
    transform: rotate(-60deg); 
 
}

<div class="roundHex"></div>