-2

I'd like to style a div in the shape of an irregular hexagon with all right angles (think the shape of Utah, but not necessarily that orientation).

I've seen some questions on StackExchange regarding irregular shapes for buttons (people say to use an image), and using irregular shapes for triangles (people say to use clipping), but nothing so far on having an irregular shape with right angles, as a parent or child div. Is this possible using only a single div in CSS/3? This question seems promising (I think), but I'm still a novice at CSS and it seems to focus more on images than just container divs (and I don't think there was a consensus, either).

Or will I have to somehow float two divs right next to each other, in the spirit of this answer?

Community
  • 1
  • 1

1 Answers1

3

This will be impossible with a single div, because the div will always be rectangular. See the excellent answer here for a fuller explanation: How can I make a div with irregular shapes with css3 and html5?

Edit: This is actually possible with the clip-path CSS attribute, as helpfully pointed out by @ZachSaucier in the comments. Demo You learn something new every day!

Community
  • 1
  • 1
elixenide
  • 44,308
  • 16
  • 74
  • 100
  • Thanks, Ed, I'll read that in-depth now. I came across that earlier but disregarded it after skimming because it seemed very specific with regard to the kind of shape/map function in the OP (looks like a bunch of perfect squares skewed to an angle to me). –  Feb 10 '14 at 20:46
  • It's essentially the same problem. The rotation isn't an issue in the newest browsers, because you can use the [rotate transformation](https://developer.mozilla.org/en-US/docs/Web/CSS/transform), but doing it all as an irregular shape is a problem. – elixenide Feb 10 '14 at 20:49
  • 1
    This is incorrect as there is a way to do it using `clip-path` – Zach Saucier Dec 17 '14 at 20:53
  • @ZachSaucier I had no idea that existed. Thanks; I'll update my answer. – elixenide Dec 17 '14 at 20:55
  • 2
    It can also be done using pseudo or shadow elements, but those kind of are elements :P – Zach Saucier Dec 17 '14 at 20:57
  • Thanks @EdCottrell for the update. Unfortunately Firefox (my main browser) doesn't support that part of `clip-path` yet, so I'm off to Chrome to check out the demo. –  Dec 17 '14 at 21:13