帶有虛線邊框的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 -這個指令中m指定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

喜歡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> 

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

的jsfiddle

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

輸出：

你應用顏色。