This content originally appeared on DEV Community and was authored by Anton Kurtin
The problem with computer rounding is its unnaturalness.
If you build a rectangle in the graphical editor, and then add a fillet to it, a circle will simply be entered into its corner.
Because of this, a form arises that does not occur in the real world. To make the bend look natural, the line should change shape gradually.
Ultimately, the researchers found that users liked shapes with smooth curves more than those with sharp lines.
Sharp objects often signal danger. Slight curvature and bulges are characteristic of living organisms.
.squircle { aspect-ratio : 1/1; background: inherit; position: relative; border-radius: 20%; }
.squircle::before, .squircle::after { content: ""; position: absolute; z-index: -1; background: inherit; }
.squircle::before { border-radius: 2%/30%; top: 15%; bottom: 15%; right: -1%; left: -1%; }
.squircle::after { border-radius: 30%/2%; left: 15%; right: 15%; top: -1%; bottom: -1%; }
Just add .squircle class to your element and set width and background of the element.
the only limit is that the element must have a 1/1 ratio
This content originally appeared on DEV Community and was authored by Anton Kurtin
Anton Kurtin | Sciencx (2023-03-29T16:14:23+00:00) how to make any rounded shape way more sexy? (css only). Retrieved from https://www.scien.cx/2023/03/29/how-to-make-any-rounded-shape-way-more-sexy-css-only/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.