Hexagon with border and image - html

Question

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

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

Answer 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).

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