CODEWITHSUNDEEP
htmlcssshapescss-shapes
daman
daman

Reputation: 309

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.

Upvotes: 2

Views: 5346

Answers (2)

Vennsoh
Vennsoh

Reputation: 5001

Try border-radius-shape syntax. Coming to you in the near future. Try it here first. http://leaverou.github.io/border-corner-shape/

Upvotes: 0

iConnor
iConnor

Reputation: 20209

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

Upvotes: 1

Related Questions