CODEWITHSUNDEEP
htmlcsscss-shapes
john152
john152

Reputation: 21

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

Upvotes: 1

Views: 2659

Answers (3)

David Thomas
David Thomas

Reputation: 253328

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:

Upvotes: 2

web-tiki
web-tiki

Reputation: 103790

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>

Upvotes: 2

Piyush aggarwal
Piyush aggarwal

Reputation: 772

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

Upvotes: 0

Related Questions