Hexagon with border and image

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

You may find this helpful - http://stackoverflow.com/questions/19418486/hexagon-shape-with-a-border-outline/31919429#31919429. It is not the same approach as the one you're using but a different method to achieve the same result. — Harry, Dec 12 '15 at 13:54
You might find this helpful too http://css-shapes.xyz/hexagon — Akshay, Dec 12 '15 at 14:38

score 2 · Answer 1 · answered Dec 14 '15 at 09:39

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>

score 2 · Answer 2 · edited May 23 '17 at 12:07

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:

score 0 · Answer 3 · answered Dec 12 '15 at 14:17

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

Thanks for your answer. It is also another way to make the border because if I zoom the hexagon, the border is not perfect at edges. — john152, Dec 13 '15 at 11:13

Hexagon with border and image

3 Answers3

Linked