2

Circle Images

I can get circle borders using border-radius:

img {
  border-radius: 50%;
}

Hexagonal Images

I'm hoping to create hexagonal images though. I'm guessing that wrapping the images in a div/span (or a few of them) will be required.

Something like either of these:

For simplicity's sake, all images are square.

Objective

The point of getting images like this is to stack them in a honeycomb like structure. I'm not putting this as part of the question as it should be relatively easy to achieve if I can get my images hexagonal.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
jcuenod
  • 55,835
  • 14
  • 65
  • 102

1 Answers1

3

How about clip-path...

img {
  -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%);
}
<img src="http://placehold.it/200">

Here is a jazzy tool for easily generating the clip-path attribute. And here is a nice article with more information.

matthewelsom
  • 944
  • 1
  • 10
  • 21
  • 1
    That's a fantastic solution. Thanks! – jcuenod Jul 06 '15 at 14:11
  • 1
    @matthewelsom You might want to add your answer above the the duplicate answer linked at the top. – Paulie_D Jul 06 '15 at 14:31
  • 3
    @jcuenod be aware that this solution will only work in webkit browsers. IE doesn't support the clip-path property and FF doesn't support polygon. More info on [canIuse](http://caniuse.com/#feat=css-clip-path) – web-tiki Jul 06 '15 at 14:59
  • However you could use inline svg: http://stackoverflow.com/questions/28311741/responsive-clip-path-with-inline-svg – jcuenod Jul 06 '15 at 15:17
  • 1
    @jcuenod I provided an SVG approach in the duplicate question here : http://stackoverflow.com/a/31284251/1811992 – web-tiki Jul 08 '15 at 06:01