Image in a rounded edged hexagon

Tags: html css
Question!

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.



Answers

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


This video can help you solving your question :)
By: admin