DEV Community

Cover image for CSS Shapes

CSS Shapes

Sharkcoder on September 19, 2019

This article includes examples of styling different shapes on CSS. Border-Radius Property The border-radius property is an important co...
Collapse
 
supremebeing09 profile image
nils binder 🏳️‍🌈

A while ago, I made this little tool that helps you create irregular organic shapes using border-radius. Maybe it's helpful.
9elements.github.io/fancy-border-r...

Understanding how it works with all eight values set can be a little confusing. I wrote a short article about how this works:
9elements.github.io/fancy-border-r...

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

A little tip. If you want a pill shape, try using an extremely large relative value like:

border-radius: 9e9em;
Collapse
 
dotorimook profile image
dotorimook

The curved arrow is impressive!

Collapse
 
seanmclem profile image
Seanmclem

Not the same as the CSS Shapes api?
developer.mozilla.org/en-US/docs/W...

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

No I had thought this post was about that 🧐

Collapse
 
peterdavidcarter profile image
Peter David Carter

Omg, the things these experts can do with css! 🙃

Collapse
 
nenadkaevik profile image
Nenad Kaevik

The Arrow Pointer's after pseudo element always has to be the same color as the background... You can make a cutout with mix-blend-mode: screen;

Collapse
 
adeleke5140 profile image
Kehinde Adeleke

This article really helped me out. Thank you very much