Hexagonal Images [duplicate]

Question

This question already has an answer here:

• html/css hexagon with image inside 7 answers

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.

Answer 1

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.