Responsive grid of hexagons

Question

I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid?

Answer 1

you can use vertical-padding in % + pseudo element to draw a square to begin with.

Then , use a second element to draw a mask.

DEMO

HTML

CSS

.hex  {
  position:relative;
  margin:auto;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  display:table;
}
.hex:before {
  content:'';
  padding-top:120%;
  display:inline-block;
  vertical-align:middle;
}

.hex:after {
  content:'';
  position:absolute;
  top:0%;
  left:-10%;
  width:120%;
  padding-top:120%;
  transform: rotatex(45deg) rotate(45deg);
  text-align:center;
  box-shadow:0 0 0 200px white;;
}
.hex img {
  display:inline-block;
  vertical-align:middle;
  margin:0 -10px;
}