Hexagon with border and image

问题

I have the following code for a hexagon. I need a border around the hexagon and an image as a background of the hexagon instead of a plain color.

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>

Here is a link with the code

回答1:

I would suggest changing your approach. An inline SVG would be the most fexible way to achieve this. And it isn't complicated, especialy for simple shapes like hexagons.

Here is an example using the polygon element, the image fills the polygon with the pattern element and the border is added with CSS (stroke and stroke-width properties) :

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>

回答2:

One approach not yet covered, is to use CSS clip-path property, which is very simlar – but not quite the same as – the SVG solution offered by web-tiki.

Here we use a clip path to shape both the outer, and inner, elements, using a background-color on the outer element to emulate the border and set margin on the inner element to control the 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.

References:

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

回答3:

I have edited your CSS to add borders over it. http://codepen.io/anon/pen/MKaJJZ In order to add background image: Make the slices of the image and add it as background of each rectangle (3 rectangles you created in CSS) So that after joining 3 slices it becomes a single image

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

来源：https://stackoverflow.com/questions/34240589/hexagon-with-border-and-image