CSS3带有点状边框的六边形

Question

我可以通过以下方法实现带有实心边框的六边形：

.hex {
  margin-top: 70px;
  width: 208px;
  height: 120px;
  background: red;
  position: relative;
}
.hex:before,
.hex:after {
  content: "";
  border-left: 104px solid transparent;
  border-right: 104px solid transparent;
  position: absolute;
}
.hex:before {
  top: -59px;
  border-bottom: 60px solid red;
}
.hex:after {
  bottom: -59px;
  border-top: 60px solid red;
}
.hex.inner {
  background-color: lightgreen;
  -webkit-transform: scale(.98, .98);
  -moz-transform: scale(.98, .98);
  transform: scale(.98, .98);
  z-index: 1;
}
.hex.inner:before {
  border-bottom: 60px solid lightgreen;
}
.hex.inner:after {
  border-top: 60px solid lightgreen;
}

<div class="hex">
  <div class="hex inner">
  </div>
</div>

然而，我想要创建一个如下图片所示的带有虚线边框的六边形：

- Pugazh

---

只需使用边框：1像素虚线或点线... - Aeldred

这可以很容易地通过SVG获得。您需要使用HTML元素吗？ - Fabrizio Calderan

@fcalderan：我可以使用SVG或HTML5 Canvas。 - Pugazh

@Aeldred：我无法实现，请帮忙看一下上面的代码。 - Pugazh

@Pugazh 我使用 CSS 进行了制作，请查看。 - user6011162

@Pugazh，请查看我的更新答案。 - user6011162

Answer 1

以下是使用内联SVG的一种方法：

• 使用polygon元素创建六边形形状
• 使用stroke-dasharray控制虚线边框的大小和点之间的间距
• 使用stroke-linecap控制虚线边框的样式

svg{width:30%;margin:0 auto;}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <polygon fill="#92D050" 
           stroke="red"
           stroke-width="1"
           stroke-linecap="round"
           stroke-dasharray="0.5,3"
           points="50 1 95 25 95 75 50 99 5 75 5 25"/>
</svg>

- web-tiki

Answer 2

由于形状本身是使用边框创建的，因此无法使用问题中给出的方法创建点线框。产生六边形的是 border-top 和 border-bottom。当将 dotted 的边框样式设置为它时，您会得到非常大的点，而不是预期的输出。虽然可以使用其他 CSS 方法来创建所需形状和边框（如其他答案中所述），但最好使用 SVG 来处理这些复杂形状，因为这很容易。

使用单个 path 元素，您可以轻松地使用 SVG 实现此目标。一旦你了解了创建它所使用的命令，path 就很简单。

下面是解释：

• M5,30 - 此命令 M 移动虚拟笔到表示 (5,30) 的点。
• L50,0 - 这将从先前的点 (5,30) 到点 (50,0) 绘制一条 L 线。
• 95,30 95,70 50,100 5,70 - 这些与前面的命令相同，并绘制到各自的点。命令 (L) 本身无需重复，因为它是相同的。

通过为 stroke-dasharray 和 stroke-linecap 属性设置正确的值（如 web-tiki 的答案中所述），可以实现点线边框。

svg {
  height: 200px;
  width: 200px;
}
path {
  fill: green;
  stroke: red;
  stroke-dasharray: 0.1, 3;
  stroke-linecap: round;
}

<svg viewBox='0 0 100 100'>
  <path d='M5,30 L50,0 95,30 95,70 50,100 5,70z' />
</svg>

- Harry

Answer 3

"喜欢 SVG 解决方案（@web-tiki 和 @Harry），但这里有一个使用 3 个矩形的 CSS 解决方案："

.main{
  padding: 50px;
  position: relative;
}

.a, .b, .c{
  position: absolute;
  bottom: 0;
  width: 120px;
  height: 70px;
  background-color: green;
  border-left: 2px dotted red;
  border-right: 2px dotted red;
}

.a{
  z-index: 1;
}

.b{
  transform: rotate(60deg);
  z-index: 2;
}

.c{
  transform: rotate(120deg);
  z-index: 3;
}

<div class="main">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

{{链接1：JSFiddle}}

---

一个只使用一个 HTML 元素的解决方案：

body{
  padding: 50px;
}

.hex, .hex:before, .hex:after{
  width: 120px;
  height: 70px;
  background-color: green;
  border-left: 2px dotted red;
  border-right: 2px dotted red;
}

.hex:before, .hex:after{
  content: '';
  position: absolute;
  bottom: 0;
}

.hex{
  z-index: 1;
  position: relative;
}

.hex:before{
  transform: rotate(60deg);
  z-index: 2;
}

.hex:after{
  transform: rotate(120deg);
  z-index: 3;
}

<div class="hex"></div>

{{链接1：JSFiddle}}

- Vucko

Answer 4

HTML 代码：

<div class="hexagon"><span></span></div>

CSS 代码：

  .hexagon {
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: lightgreen;
  margin: 86.60px 0;
   border-left: 3px dotted #f00;;
  border-right:3px dotted #f00;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 212.13px;
  height: 212.13px;
  -webkit-transform: scaleY(0.5774) rotate(-45deg);
  -ms-transform: scaleY(0.5774) rotate(-45deg);
  transform: scaleY(0.5774) rotate(-45deg);
  background-color: inherit;
  left: 40.9340px;
  box-shadow: 0 0 20px rgba(0,0,0,0.6);
}

.hexagon:before {
  top: -106.0660px;
  border-top: 3px dotted #f00;
  border-right:3px dotted #f00;
}

.hexagon:after {
  bottom: -106.0660px;
  border-bottom: 3px dotted #f00;
  border-left: 3px dotted #f00;
}

/*cover up extra shadows*/
.hexagon span {
  display: block;
  position: absolute;
  top:1.7320508075688772px;
  left: 0;
  width:294px;
  height:169.7410px;
  z-index: 2;
  background: inherit;
}

输出:

根据需要应用颜色。

- user6011162