CODEWITHSUNDEEP
htmlcsscss-shapes
user6834815
user6834815

Reputation: 41

Image in a rounded edged hexagon

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.

Upvotes: 4

Views: 1911

Answers (1)

rafaelcastrocouto
rafaelcastrocouto

Reputation: 12161

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>

Upvotes: 3

Related Questions