我想在 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>圆角六边形是创建起来比较复杂的形状，我通常建议使用 SVG 来创建它们。对透明背景的需求使其更适合 SVG。使用 SVG，您可以更好地控制形状、曲线等，并且不必向标记中添加大量额外（不必要的）元素。
使用 SVG 创建此形状所需要做的就是使用单个path元素以及一些L（线）和A（弧）命令。这L(line) 命令基本上从点 1 到点 2 绘制一条线，而A(arc) 命令绘制指定半径的圆弧（紧接着的前两个值）A命令）。
您可以阅读有关 SVG 的更多信息path元素及其命令这个 MDN 教程.
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，你可以遵循使用的方法jbutler483 in 这把小提琴他的。 (我已将该小提琴中的代码也附加到此答案中，以避免链接腐烂问题)
.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>