、国境を六角形にしますが、私は国境を持つ六角形の形状を作りたい

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（円弧）コマンドを使用することだけです。 A（arc）コマンドは、指定された半径の円弧（最初の2つの値はAコマンドの直後）を描画しますが、（line）コマンドは基本的に1から2点に線を描画します。

要素とそのコマンドの詳細については、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>