带边框/轮廓的六边形

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

如何创建一个用一种颜色填充并用另一种颜色勾勒出轮廓的六边形？我正在尝试摆弄它，但这似乎是不可能的。

欢迎任何其他替代方案，我想 避免 使用图像。

原文由 Arkuen 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

再次， 这里是活生生的例子

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 3.0 许可协议

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 中不工作。 FF 的问题可以通过对 clip-path 使用 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>

原文由 Harry 发布，翻译遵循 CC BY-SA 3.0 许可协议