帶邊框/輪廓的六邊形

Question

我知道可以使用以下代碼創建六邊形：

.hex:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
}

.hex {
    margin-top: 30px;
    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
}

.hex:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}

如何創建一個用一種顏色填充並用另一種顏色勾勒出輪廓的六邊形？ 我正在嘗試擺弄它，但這似乎是不可能的。

歡迎任何其他選擇，我想避免使用圖像。

Answer 1

直接通過偽元素創建六邊形是不可能實現這一點的。 另一種方法是在六邊形內疊加六邊形，從而獲得相同的期望結果。

以下是可以實現的示例 ：

這里的實際例子

HTML - 非常基本，為更多邊框繼續相同的模式。

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

CSS （三層 - 兩個內部元素）

從六邊形類開始，定義形狀/尺寸/顏色：

.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    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 #6C6;
}
.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

設置內部類的樣式並使用transform: scale()按比例減小內部元素的尺寸。 在此示例中，使用比例尺scale(.8, .8) 。 如果你想要更厚的邊框，減少數字; 相反，如果您想要更薄的邊框，請增加數字。

指定並覆蓋顏色，還會增加z-index值以使元素前進。

.hex.inner {
    background-color:blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:1;
}
.hex.inner:before {
    border-bottom: 60px solid blue;
}
.hex.inner:after {
    border-top: 60px solid blue;
}

設置第二個嵌套元素的樣式，基本上遵循與上次相同的步驟。 使用相同的scale值是沒有價值的，因為它在已經縮放的元素內。 當然，你可以隨意使用任何東西; 這只是一個基本的例子。

.hex.inner2 {
    background-color:red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index:2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}

再次， 這里的實例

Answer 2

這是使用clip-path功能創建帶邊框（或輪廓）的六邊形的另一種方法。 在這個方法中，我們使用容器元素和一個偽元素，它具有比容器更小的尺寸（ height和width ）。 當相同的clip-path應用於兩個元素時，容器元素的background-color僅在邊緣處看到偽元素后面，並使其看起來像形狀的邊框/輪廓。

好處：

• 六邊形也可以具有漸變或圖像（基本上是非純色）作為background 。
• 形狀具有響應性 ，可以自動適應容器尺寸的任何變化。

 .hexagon { position: relative; height: 150px; width: 150px; background: black; } .hexagon:before, .double:after { position: absolute; content: ''; } .hexagon:before { top: 4px; /* border width */ left: 4px; /* border width */ height: calc(100% - 8px); /* 100% - (2 * border width) */ width: calc(100% - 8px); /* 100% - (2 * border width) */ background: #6c6; } .hexagon, .hexagon:before, .double:after { -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .image:before { background: url(http://lorempixel.com/150/150/nature/1); } .double:after { top: 8px; left: 8px; height: calc(100% - 16px); width: calc(100% - 16px); background: black; } /* Just for demo */ .hexagon { display: inline-block; margin: 20px; } 

 <div class="hexagon"></div> <div class="hexagon image"></div> <div class="hexagon double"></div> 

主要缺點是目前瀏覽器支持不佳 。 CSS clip-path目前在IE和FF中不起作用。 可以通過對clip-path使用SVG（內聯或外部）來修復FF的問題（如下面的代碼段所示）：

 .hexagon { position: relative; height: 150px; width: 150px; background: black; } .hexagon:before, .double:after { position: absolute; content: ''; } .hexagon, .hexagon:before, .double:after { -webkit-clip-path: url(#hexagon-clip); clip-path: url(#hexagon-clip); } .hexagon:before { top: 4px; /* border width */ left: 4px; /* border width */ height: calc(100% - 8px); /* 100% - (2 * border width) */ width: calc(100% - 8px); /* 100% - (2 * border width) */ background: #6c6; } .image:before { background: url(http://lorempixel.com/200/200); } .double:after { top: 8px; left: 8px; height: calc(100% - 16px); width: calc(100% - 16px); background: black; } /* Just for demo */ .hexagon { display: inline-block; margin: 20px; } 

 <svg width="0" height="0"> <defs> <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox"> <path d="M0.5 0, 1 0.25, 1 0.75, 0.5 1, 0 0.75, 0, 0.25z" /> </clipPath> </defs> </svg> <div class="hexagon"></div> <div class="hexagon image"></div> <div class="hexagon double"></div> 

Answer 3

完成將六邊形放在另一個上面。 底部是黑色六邊形，頂部是白色。

這是結果

jsFiddle在這里

只會像border

Answer 4

您可以使用scaleX和rotate變換僅使用一個元素創建它。 這使用了與此處相同的方法，但頂部有一個額外的偽元素。

小提琴

 body{font-size: 25px;} div { margin: 3em 0; width: 10em; height: 5.7736em; /*width / 2*0.866*/ background: orange; box-shadow: inset -1.22em 0 0 0 navy, inset 1.22em 0 0 0 navy, inset -2.44em 0 0 0 crimson, inset 2.44em 0 0 0 crimson; position: relative; } div:before, div:after { content: ''; position: absolute; background: inherit; width:4.08em; height:4.08em; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: scaleX(1.73) rotate(45deg); -moz-transform: scaleX(1.73) rotate(45deg); -ms-transform: scaleX(1.73) rotate(45deg); transform: scaleX(1.73) rotate(45deg); } div:before { top: -4.08em; box-shadow: inset 0 1em 0 0 navy, inset 1em 0 0 0 navy, inset 0 2em 0 0 crimson, inset 2em 0 0 0 crimson; } div:after { bottom: 0; box-shadow: inset 0 -1em 0 0 navy, inset -1em 0 0 0 navy, inset 0 -2em 0 0 crimson, inset -2em 0 0 0 crimson; } 

 <div></div> 

您甚至可以在懸停到此六邊形時添加過渡效果： 小提琴（懸停過渡）

這里使用box-shadows的缺點是它們在Firefox上創建了可見的鋸齒狀邊緣。

Answer 5

剛剛找到這個六角形設計師的鏈接，你可以復制html和css來獲得你想要的東西。 以為我會留在這里給其他遇到這篇文章的人。

因此，使用該工具，要有一個綠色輪廓的白色六邊形：

 .hexagon { position: relative; width: 100px; height: 57.74px; background-color: #ffffff; margin: 28.87px 0; border-left: solid 5px #28bf20; border-right: solid 5px #28bf20; } .hexagon:before, .hexagon:after { content: ""; position: absolute; z-index: 1; width: 70.71px; height: 70.71px; -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 9.6447px; } .hexagon:before { top: -35.3553px; border-top: solid 7.0711px #28bf20; border-right: solid 7.0711px #28bf20; } .hexagon:after { bottom: -35.3553px; border-bottom: solid 7.0711px #28bf20; border-left: solid 7.0711px #28bf20; } 

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

Answer 6

我通過使用三個不同的元素來制作它並且可以正常工作這是最簡單的方法，您可以使用默認的 html 邊框

 <.Doctype HTML> <html > <head > <title >hexagon with border</title> <style >,hexinner.,hexinner2.:hexinner3{ width; 208px: height; 120px: background; #6C6: position; fixed: left;30%: top; 30%: border-left;solid red 3px: border-right;solid violet 4px. }:hexinner2{ transform; rotate(60deg). }:hexinner3{ transform; rotate(-60deg); } </style> </head> <body > <h3 class="hexinner"> </h3> <h3 class="hexinner2"> </h3> <h3 class="hexinner3"> </h3> </body> </html>

Answer 7

如果像我一樣，你不喜歡純粹為了風格而擁有 HTML 個元素的想法，這里有一個只使用一個元素的解決方案，允許你在里面擁有任何你想要的東西：

 .hexagon { position: relative; height: 150px; width: 150px; /* We cut the element in an hexagonal shape */ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); }.hexagon::after { position: absolute; left: 0; top: 0; right: 0; bottom: 0; content: ''; background: black; clip-path: polygon( /* We first go around the pseudo element to recreate the hexagon */ 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%, /* We make sure to close the hexagon and go back to the start */ 50% 0%, /* We then go down inside the hexagon (feel free to change the border size, here it is of 10px)*/ 50% 10px, /* We finally go around the pseudo element in reverse to carve a smaller hexagon inside */ /* 0.49999999999999994 is sin(30deg) as it's only supported in Safari for now */ 10px calc(25% + 10px * 0.49999999999999994), 10px calc(75% + 10px * -0.49999999999999994), 50% calc(100% - 10px), calc(100% - 10px) calc(75% + 10px * -0.49999999999999994), calc(100% - 10px) calc(25% + 10px * 0.49999999999999994), 50% 10px ); }

 <div class="hexagon"> <image src="https://picsum.photos/150"/> </div>