六角形,边框/轮廓

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中不起作用.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>