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

直接可以实现这一点，因为六边形是通过伪元素通过边框创建的。另一种方法是在六边形内叠加六边形，从而获得相同的预期结果。

以下是example可以实现的目标：

LIVE EXAMPLE HERE

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

再次，live example here

Answer 2

这是使用clip-path功能创建带边框（或轮廓）的六边形的另一种方法。在这个方法中，我们使用一个容器元素和一个伪元素，它具有比容器更小的维度（height和width）。当对两个元素应用相同的clip-path时，容器元素的background-color仅在边缘处看到伪元素后面，并使其看起来像形状的边框/轮廓。 / p>

<强>优点：

六边形也可以具有渐变或图像（基本上是非纯色）background。
形状响应，可以自动适应容器尺寸的任何变化。

＆＃13;

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

＆＃13;

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

＆＃13;

主要劣势目前是poor browser support。 CSS clip-path目前在IE和FF中不起作用。 FF的问题可以通过使用clip-path的SVG（内联或外部）来修复（如下面的代码段所示）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

将六边形放在另一个上面。底部是黑色六角形，顶部是白色。

结果如下

enter image description here

jsFiddle here

只会像border

Answer 4

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

<强> Fiddle

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

您甚至可以在悬停到此六边形时添加过渡效果： Fiddle (hover transition)

enter image description here

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

Answer 5

刚刚找到hexagon designer的链接，你可以复制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>

六角形，边框/轮廓

5 个答案:

LIVE EXAMPLE HERE