带有虚线边框的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>

但是,我想创建一个带有虚线边框的六边形,如下图所示:

Answer 1

这是一个使用内联svg的方法:

• 六角形的多边形元素
• 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>

Answer 2

您无法使用相关方法创建虚线边框,因为形状本身是使用边框创建的.该border-top和border-bottom产生的六边形.当你dotted为它设置边框样式时,你得到的只是非常大的点,不像预期的输出.虽然您可以使用其他CSS方法来创建所需的形状+边框(如其他答案中所述),但最好将SVG用于此类复杂形状,因为它很容易.

您可以使用单个path元素轻松地使用SVG执行此操作.该path是简单的创建,一旦你拥有了在创建它使用的命令有很好的理解.

以下是一个解释:

• M5,30-此命令中号 oves虚笔由(5,30)表示的点.
• L50,0- 这将从前一点(5,30)到点(50,0)绘制一个L ine.
• 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>

Answer 3

网页代码：

<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;
}

输出 ：

根据需要涂抹颜色。