css - 制作带有边框、圆 Angular 和透明背景的六边形

Question

我想在 CSS3 中制作一个带有边框、圆 Angular 和透明背景的六边形，如下图所示:



我不能用圆 Angular 和边框来做这个。

我的代码在这里:

#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

带圆 Angular 的六边形是创建复杂的形状，我通常建议使用 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，你可以按照 jbutler483 使用的方法在 this fiddle他的。 (我已将该 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>