带边框和图像的六边形

Question

我有以下六边形代码。我需要六边形周围的边框和作为六边形背景的图像，而不是纯色。

body {
  background: #ecf0f1;
}
#hex1 {
  width: 200px;
  height: 200px;
}
#color1 {
  background-color: #D93;
}
.hexagon-wrapper {
  text-align: center;
  margin: 20px;
  position: relative;
  display: inline-block;
}
.hexagon {
  height: 100%;
  width: 57.735%;
  display: inline-block;
}
.hexagon:before {
  position: absolute;
  top: 0;
  right: 21.1325%;
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotate(60deg);
}
.hexagon:after {
  position: absolute;
  top: 0;
  right: 21.1325%;
  background-color: inherit;
  height: inherit;
  width: inherit;
  content: '';
  transform: rotate(-60deg);
}

<div id="hex1" class="hexagon-wrapper">
  <span id="color1" class="hexagon"></span>
</div>

这是code的链接

Answer 1

我建议改变你的方法。 inline SVG 将是实现这一目标的最灵活方法。而且它并不复杂，特别是对于像六边形这样简单的形状。

这是一个使用polygon 元素的示例，图像使用pattern element 填充多边形并使用CSS 添加边框（stroke 和stroke-width 属性）：

svg{
  width:30%;
  margin:0 auto;
}
#hex{
  stroke-width:2;
  stroke: teal;
}

<svg viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="100" height="100">
      <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg" x="-25" width="150" height="100" />
    </pattern>
  </defs>
  <polygon id="hex" points="50 1 95 25 95 75 50 99 5 75 5 25" fill="url(#img)"/>
</svg>

Answer 2

尚未涵盖的一种方法是使用 CSS clip-path 属性，这与 SVG 解决方案 offered by web-tiki 非常相似，但并不完全相同。

这里我们使用剪辑路径来塑造外部和内部元素，在外部元素上使用background-color 模拟边框并在内部元素上设置margin 来控制border-width：

html, body {
  height: 100%;
  background-color: black;
}
div.hexagon-wrapper {
  display: inline-block;
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  background-color: limegreen;
}
.hexagon-wrapper .hexagon {
  display: block;
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  margin: 3px;
}

<div class="hexagon-wrapper">
  <img class="hexagon" src="http://lorempixel.com/150/150/people/1" />
</div>

JS Fiddle demo.

参考资料：

• clip-path (MDN)。
• clip-path (W3C)。

Answer 3

我已编辑您的 CSS 以在其上添加边框。 http://codepen.io/anon/pen/MKaJJZ 为了添加背景图像： 制作图像的切片并将其添加为每个矩形的背景（您在 CSS 中创建的 3 个矩形），这样在连接 3 个切片后它就变成了单个图像

<div id="hex1" class="hexagon-wrapper">
    <span id="color1" class="hexagon"></span>
</div>
body { background: #ecf0f1; }
#hex1 { width: 200px; height: 200px; }
#color1 { background-color: #D93; }
.hexagon-wrapper { text-align: center; margin: 20px; position: relative; display: inline-block; }
.hexagon { height: 100%; width: 60%; display: inline-block; border-top:5px solid red; border-bottom:4px solid red; }
.hexagon:before { position: absolute; top: 0; right: 20%; background-color: inherit; height: inherit; width: inherit; content: ''; transform: rotate(60deg); border-top:5px solid red; border-bottom:5px solid red; }
.hexagon:after { position: absolute; top: 0; right: 20.1%; background-color: inherit; height: inherit; width: inherit; content: ''; transform: rotate(-60deg); border-top:5px solid red; border-bottom:5px solid red;  }