How do I use CSS 3 border-radius for creating complex shapes?


I'm making this shape using css3. But I could not find an elegant solution to make it. I have tried some samples from css3shapes, but those are pretty simple. How do i go about drawing such a complex shape.


Answers:


That's not possible with one element and border-radius

Border radius only accepts 8 arguments like this

    border-top-left-radius: 1px 2px;
   border-top-right-radius: 3px 4px;
 border-bottom-left-radius: 5px 6px;
border-bottom-right-radius: 7px 8px;

You can't to any more than that.

Plus a element/box only has 4 corners, that shape must have at least 10 corners.

Might be a bad idea, but you could use border-image if you don't wan't it as a background.

Or use SVG