Machen Sechseck-Form mit Rande, abgerundete Ecken und transparenten Hintergrund

Question

ich eine hexagonale Form mit Rand machen will, abgerundete Ecken und transparenten Hintergrund in CSS3 wie in diesem Bild:

kann ich nicht machen dies mit abgerundeten Ecken und Rand.

Mein Code ist hier:

#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

Hexagon mit abgerundeten Ecken sind komplexe Formen zu erstellen, und ich empfehle in der Regel SVG mit ihnen zu schaffen. Die Notwendigkeit für einen transparenten Hintergrund macht es noch besser für SVG geeignet. Mit SVG können Sie die Form, die Kurven usw. besser steuern und Sie müssen Ihrem Markup auch nicht viele zusätzliche (unnötige) Elemente hinzufügen.

Zum Erstellen dieser Form mit SVG wird nur ein einziges path Element benötigt, zusammen mit einigen wenigen Befehlen L (Zeile) und A (Bogen). Der L (Zeilen-) Befehl zeichnet grundsätzlich eine Linie von Punkt 1 nach Punkt 2, während der A (Bogen) -Befehl einen Bogen des angegebenen Radius zeichnet (die ersten beiden Werte folgen unmittelbar auf den Befehl A).

Sie können mehr über das Element SVG path und seine Befehle in this MDN tutorial lesen.

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>

Wenn Sie noch CSS verwenden, könnte man den Ansatz von jbutler483 in this fiddle seiner verwendet folgen. (Ich habe den Code von dieser Geige beigefügten auch in diese Antwort Toter Link Probleme zu vermeiden)

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