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来控制{ {1}}：

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

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

六角形与边框和图像

3 个答案: