html css hexagon with image inside

Question

Is it possible to put an image inside a hexagonal shape? In HTML, I'm used to hexagonal shaped cells, but I couldn't get one to fill with a (background?) image.

Answer 1

The CSS3 clip-path feature is a novel and simple solution.
The CSS below will display a rectangular element in hexagon shape:

div.hexagon {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}