Html 带边框/轮廓的六边形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19418486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hexagon shape with a border/outline
提问by Arkuen
I know it's possible to create a hexagon shape using the following code:
我知道可以使用以下代码创建六边形：
.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;
}
How can I create a hexagon that's filled with one color, and outlined with another? I'm trying to fiddle with it, but it does not seem to be possible.
如何创建一个填充了一种颜色并用另一种颜色勾勒出的六边形？我试图摆弄它，但似乎不可能。
Any other alternatives are welcome, I would like to avoidusing images.
欢迎任何其他替代方案，我想避免使用图像。
回答by Josh Crozier
It is not directlypossible to achieve this, as hexagons are created by borders through pseudo elements. An alternative would be to overlay hexagons within hexagons, thus achieving the same desired results.
这是不可能直接实现的，因为六边形是通过伪元素由边界创建的。另一种方法是在六边形内叠加六边形，从而实现相同的预期结果。
Here is an exampleof what can be achieved:
以下是可以实现的示例：
LIVE EXAMPLE HERE
现场示例在这里
HTML- pretty basic, continue the same pattern for more borders.
HTML- 非常基本的，为更多边框继续相同的模式。
<div class="hex">
<div class="hex inner">
<div class="hex inner2"></div>
</div>
</div>
CSS(three layers - two inner elements)
CSS（三层 - 两个内部元素）
Start with the hexagon class, defining the shape/size/colors:
从六边形类开始，定义形状/大小/颜色：
.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;
}
Style the inner class and use transform: scale()to proportionally decrease the dimensions of the inner elements. In this example, a scale of scale(.8, .8)is used. If you want thicker borders, decrease the numbers; conversely, if you want thinner borders, increase the numbers.
设置内部类的样式并用于transform: scale()按比例减少内部元素的尺寸。在本示例中，使用了 的比例scale(.8, .8)。如果您想要更粗的边框，请减少数字；相反，如果您想要更薄的边框，请增加数字。
Specify and overwrite the colors, also increase the z-indexvalue to bring the element forward.
指定和覆盖颜色，同时增加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;
}
Style the second nested element, essentially following the same steps as last time. It's worth nothing that the same scalevalue is used, because it is within an already scaled element. Of course, you can use whatever you want; this is just a basic example.
设置第二个嵌套元素的样式，基本上遵循与上次相同的步骤。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;
}
Again, live example here
再次，这里是现场示例
回答by Harry
Here is another method to create hexagons with border (or outline) using the clip-pathfeature. In this method, we use a container element and a pseudo-element which has smaller dimensions (both heightand width) than the container. When the same clip-pathis applied to both the elements, the background-colorof the container element is seen behind the pseudo-element only at the edges and makes it look like a border/outline to the shape.
这是使用该clip-path功能创建带边框（或轮廓）的六边形的另一种方法。在这种方法中，我们使用一个容器元素和一个尺寸（height和width）都比容器小的伪元素。当同样的clip-path方法应用于两个元素时，background-color容器元素的 仅在边缘处出现在伪元素后面，并使其看起来像形状的边框/轮廓。
Advantages:
好处：
- Hexagons can also have gradients or images (basically non-solid color) as
background. - Shape is responsiveand can automatically adapt to any change in the container dimensions.
- 六边形也可以具有渐变或图像（基本上是非纯色）作为
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>The major disadvantageis the poor browser supportat present. CSS clip-pathdo not work in IE and FF currently. The problem with FF can be fixed by using a SVG (inline or external) for the clip-path(like in the below snippet):
的主要缺点是浏览器支持穷人的存在。CSSclip-path目前不适用于 IE 和 FF。FF 的问题可以通过使用 SVG（内联或外部）来解决clip-path（如下面的代码片段所示）：
.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>回答by Sobin Augustine
Done with placing the hexagonal shape on top of another. where black Hexagon at the bottom and white at the top.
完成将六边形放在另一个上面。其中底部为黑色六边形，顶部为白色。
Here is the result
这是结果
Only will be like a border
只会像一个 border
回答by The Pragmatick
You can create that using only one element, using scaleXand rotatetransforms. This uses the same method used here, but with one extra pseudo-element on top.
您可以仅使用一个元素来创建它，使用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>You can even add transition effect on hover to this hexagon : Fiddle (hover transition)
您甚至可以将悬停时的过渡效果添加到此六边形：Fiddle（悬停过渡）
The downside of using box-shadows here is that they create visible jagged edges on Firefox.
在这里使用 box-shadows 的缺点是它们会在 Firefox 上创建可见的锯齿状边缘。
回答by JabbaWook
Just found this link to a hexagon designerthat you can copy the html and css from to get what you want. Thought i'd leave it here for anyone else coming across this post.
刚刚找到了一个六边形设计器的链接，您可以从中复制 html 和 css 以获得您想要的。以为我会把它留在这里给其他人看到这篇文章。
So using the tool, to have a white hexagon with a green outline:
所以使用该工具，得到一个带有绿色轮廓的白色六边形：
.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>