Image in a rounded edge hexagon

Question

I am trying to create an image inside a rounded hexagon where this image will act as the title of a longer hexagon to display profile / biography information. The hexagon would also have a border.

I researched, and so far I could find a practical guide on how to put an image in a hexagon and how to make a rounded hexagon hexagon, how it is available here (this is the shape I want, except it rotates) http://codepen.io/thebabydino / details / gFxzt It seems that I can not combine the two concepts together, perhaps because they are different.

Can someone help me.

This is what I have come up with so far that I do not 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 is my jsfiddle .

Bonus points for responsiveness.

Answer 1

If your image has a fixed background color, you can use this pen, this is thebabydino hexagon plug:

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

If not, you can use the 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>

Run code