使六邊形形狀的邊框，圓角和透明背景

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（line）命令基本上從點1到點2繪製一條線，而A（arc）命令繪製指定半徑的弧（緊接在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，你可以按照自己的this fiddle使用jbutler483的辦法。 （我已經附加從小提琴也代碼到這個答案，以避免鏈接腐爛問題）

.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>