4

I'm trying to create an image inside a rounded cornered hexagon, where that image would act as a header of longer hexagon to display profile/biography information. The hexagon would also have a border.

I've researched, and while I was able to find a how-to on how to put an image in a hexagon and how to make a rounded cornered hexagon like it is available here (which is the shape i want except it's rotated) http://codepen.io/thebabydino/details/gFxzt I can't seem to be able to merge the two concepts together, probably because they're different.

Could someone help me please.

This is what I've come up with so far which is not really what i want. 

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

Here's my jsfiddle.

Bonus points for responsiveness.

dippas
  • 58,591
  • 15
  • 114
  • 126
user6834815
  • 41
  • 2

1 Answers1

3

If your image has a fixed background color you can use this pen, it's a fork of thebabydino's hexagon:

http://codepen.io/rafaelcastrocouto/pen/mAPjRP

If it's not, you can use SVG path

http://codepen.io/rafaelcastrocouto/pen/vXGamL

.clip-polygon {
  -webkit-clip-path: url("#hex");
  clip-path: url("#hex");
}
<div class="clip-wrap">
  <img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=ff6347&txtclr=ffffff&txt=Image&w=140&h=140" alt="demo-clip-path" width="140" height="140" class="clip-polygon">
</div>

<svg height="0" width="0">
  <defs>
    <clipPath id="hex">
      <path d="M59 2.8867513459481a10 10 0 0 1 10 0l45.425625842204 26.226497308104a10 10 0 0 1 5 8.6602540378444l0 52.452994616207a10 10 0 0 1 -5 8.6602540378444l-45.425625842204 26.226497308104a10 10 0 0 1 -10 0l-45.425625842204 -26.226497308104a10 10 0 0 1 -5 -8.6602540378444l0 -52.452994616207a10 10 0 0 1 5 -8.6602540378444"></path>
    </clipPath>
  </defs>
</svg>
rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • how to adjust width and height? I have a 70x70 image, and I want the hexagon somewhat near to 70 – Gijo Varghese Feb 21 '18 at 12:39
  • For the CSS solution you need to change the `width` and `height` properties. For the SVG the easier way is to use a editor (http://editor.method.ac/ or https://github.com/SVG-Edit/svgedit). You can also use local editors like Inkscape or Corel. You can copy/paste the `` above into a text file and rename it to end with `.svg` – rafaelcastrocouto Feb 21 '18 at 16:04