制作带边框、圆角和透明背景的六边形

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（线）命令基本上绘制一条从点 1 到点 2 的线，而 A（弧）命令绘制指定半径的圆弧（紧跟在 [=16= 之后的前两个值） ] 命令）。

您可以在 this MDN tutorial 中阅读有关 SVG path 元素及其命令的更多信息。

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 this fiddle的方法来做。（我已将 fiddle 中的代码附加到此答案中以避免 link 腐烂问题）

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

Answer 2

我制作了一个代码笔，您可以在其中自定义边长和边框半径：https://codepen.io/shreyansqt/pen/qBjprWE

HTML:

<svg width="500" height="500">
  <path id="hexagon" fill="red" />
</svg>

JS:

const getHexagonPathData = () => {
  // #################### x1,y0 ####################
  // ############## xc1,yc0 # xc2,yc0 ##############
  // ###############################################
  // ###############################################
  // #### xc0,yc1 ##################### xc3,yc1 ####
  // ## x0,y1 ############################# x2,y1 ##
  // ## x0,yc2 ########################### x2,yc2 ##
  // ###############################################
  // ###############################################
  // ## x0,yc3 ########################### x2,yc3 ##
  // ## x0,y2 ############################# x2,y2 ##
  // #### xc0,yc4 ##################### xc3,yc4 ####
  // ###############################################
  // ###############################################
  // ############## xc1,yc5 # xc2,yc5 ##############
  // #################### x1,y3 ####################

  const sin = (deg) => Math.sin((deg * Math.PI) / 180);
  const cos = (deg) => Math.cos((deg * Math.PI) / 180);

  const borderRadius = 6;
  const sideLength = 80;
  const x0 = 0;
  const y0 = 0;

  const x1 = sideLength * cos(30);
  const y1 = sideLength * sin(30);

  const xc1 = x1 - borderRadius * cos(30);
  const yc0 = borderRadius * sin(30);
  const xc2 = x1 + borderRadius * cos(30);

  const x2 = 2 * x1;
  const y2 = y1 + sideLength;

  const xc3 = x2 - borderRadius * cos(30);
  const yc1 = y1 - borderRadius * sin(30);
  const yc2 = y1 + borderRadius;

  const y3 = y2 + y1;

  const yc3 = y2 - borderRadius;
  const yc4 = y2 + borderRadius * sin(30);

  const yc5 = y3 - borderRadius * sin(30);
  const xc0 = borderRadius * cos(30);

  return `
        M ${xc1},${yc0}
        Q ${x1},${y0} ${xc2},${yc0}

        L ${xc3},${yc1}
        Q ${x2},${y1} ${x2},${yc2}

        L ${x2},${yc3}
        Q ${x2},${y2} ${xc3},${yc4}

        L ${xc2},${yc5}
        Q ${x1},${y3} ${xc1},${yc5}
        
        L ${xc0},${yc4}
        Q ${x0},${y2} ${x0},${yc3}
        
        L ${x0},${yc2}
        Q ${x0},${y1} ${xc0},${yc1}
        Z
      `;
};

const hexagon = document.getElementById("hexagon");

hexagon.setAttribute("d", getHexagonPathData());

制作带边框、圆角和透明背景的六边形

Make hexagon shape with border, rounded corners and transparent background

css

svg

css-shapes