This question already has an answer here:
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?
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!
来源：https://stackoverflow.com/questions/21687326/can-i-make-an-irregular-div-shape-using-only-css