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.
That's not possible with one element and
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