html/css hexagon with image inside

html css svg css-shapes
honk31 picture honk31 · Sep 15, 2011 · Viewed 84.6k times · Source

Is there a chance to place an image inside a hexagon shape? I'm used to hexagonal shaped cells in html, but I could'nt get it filled with an (background?) image.

Here is what I have tried :

here is a fiddle: http://jsfiddle.net/jnz31/kGSCA/

Answer

kizu picture kizu · Sep 15, 2011

With CSS3 almost everything is possible: http://jsfiddle.net/kizu/bhGn4/

There I used different rotations with overflow: hidden, so you can get a cross-browser (well, modern cross-broser) masks that even can be coverable and clickable on the masked area.

Related questions

How do I create a teardrop in HTML?

How do I create a shape like this to display on a webpage? I don't want to use images since they would get blurry on scaling I tried with CSS: That turned out really screwed. And then I tried with …

Read More
Circular percent progress bar

I would like to have an percent circle indicator on my site: In this case it's showing 75%. How should this be done? I have the yellow circle in a image-file, but if it's easier to, some how, do it all …

Read More
SVG drop shadow using css3

Is it possible to set drop shadow for an svg element using css3 , something like box-shadow: -5px -5px 5px #888; -webkit-box-shadow: -5px -5px 5px #888; I saw some remarks on creating shadow using filter effects. Is there an …

Read More