六角形，边框/轮廓

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 avoid using images.

欢迎任何其他选择，我想避免使用图像。

5 个解决方案

#1

It is not directly possible 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 example of 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（）按比例减小内部元素的尺寸。在此示例中，使用比例尺（.8，.8）。如果你想要更厚的边框，减少数字;相反，如果您想要更薄的边框，请增加数字。

Specify and overwrite the colors, also increase the z-index value 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 scale value is used, because it is within an already scaled element. Of course, you can use whatever you want; this is just a basic example.

设置第二个嵌套元素的样式，基本上遵循与上次相同的步骤。使用相同的比例值是没有价值的，因为它在已经缩放的元素内。当然，你可以随意使用任何东西;这只是一个基本的例子。

.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

再次，这里的实例

#2

Here is another method to create hexagons with border (or outline) using the clip-path feature. In this method, we use a container element and a pseudo-element which has smaller dimensions (both height and width) than the container. When the same clip-path is applied to both the elements, the background-color of the container element is seen behind the pseudo-element only at the edges and makes it look like a border/outline to the shape.

这是使用剪辑路径功能创建带边框（或轮廓）的六边形的另一种方法。在这个方法中，我们使用一个容器元素和一个伪元素，它具有比容器更小的尺寸（高度和宽度）。当相同的剪辑路径应用于两个元素时，容器元素的背景颜色仅在边缘处看到伪元素后面，并使其看起来像形状的边框/轮廓。

Advantages:

优点：

• Hexagons can also have gradients or images (basically non-solid color) as background.
• 六边形也可以具有渐变或图像（基本上是非纯色）作为背景。
• Shape is responsive and can automatically adapt to any change in the container dimensions.
• 形状具有响应性，可以自动适应容器尺寸的任何变化。

.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 disadvantage is the poor browser support at present. CSS clip-path do 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):

主要缺点是目前浏览器支持不佳。 CSS剪辑路径目前在IE和FF中不起作用。 FF的问题可以通过使用剪辑路径的SVG（内联或外部）来修复（如下面的代码段所示）：

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

#3

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

这是结果

jsFiddle here

jsFiddle在这里

Only will be like a border

只会像边境一样

#4

You can create that using only one element, using scaleX and rotate transforms. This uses the same method used here, but with one extra pseudo-element on top.

您可以使用scaleX和旋转变换仅使用一个元素创建它。这使用了与此处相同的方法，但顶部有一个额外的伪元素。

Fiddle

小提琴

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)

您甚至可以在悬停到此六边形时添加过渡效果：小提琴（悬停过渡）

The downside of using box-shadows here is that they create visible jagged edges on Firefox.

在这里使用盒子阴影的缺点是它们在Firefox上创建了可见的锯齿状边缘。

#5

Just found this link to a hexagon designer that 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>