CSS border-radius can do that?
Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so:
.element {
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into your designs:
Cool, huh? I think this technique is potentially very useful if you don’t want to have an SVG wrapping some content, as I’ve seen a ton of websites lately use “blobs” as graphic elements and this is certainly an interesting new way to do that. But it also has me wondering how many relatively old and familiar CSS properties have something sneaky that’s hidden and waiting for us.
Direct Link to Article — Permalink
The post CSS border-radius can do that? appeared first on CSS-Tricks.
