CSS is capable of making all sorts of shapes. Squares and rectangles are easy, as they are the natural shapes of the web. Add a
height and you have the exact size rectangle you need. Add
border-radius and you can round that shape, and enough of it you can turn those rectangles into circles and ovals.
We also get the
::after pseudo-elements in CSS, which give us the potential of two more shapes we can add to the original element. By getting clever with positioning, transforming, and many other tricks, we can make lots of shapes in CSS with only a single HTML element.
These days, you’re best bet for drawing shapes is either SVG or using a
clip-path in CSS, which is SVG-like (and can reference SVG). For example, look at these SVG icon sets, this
clip-path editor, and this introduction to CSS clipping. This article was written originally before either of these technologies really took hold!
Always so cool to see what shapes people make in CSS. Maybe a follow up of the reasons “why” to still use CSS would be good? I find myself looking back at these slides from Sara Soueidan from years back, where she even references what cool shapes folks had made with CSS, but might be better with SVG?
I think so, SVG’s are better in general
That is the kind of easy peasy trick that is worth gold (in pounds, please) having in your bookmarks.
Thanks a lot.
Hi, thanks for share, I just have a doubt, Can only solid colors be used for pentagons? I need a transparent pentagon only with the outline
Hey Oscar, good question! Yeah, the shape requires solid colors because it relies on
border-colorand it only accepts color values.
If you’re looking for a pentagon shape with just an outline, then you might want to consider going with an SVG instead. That would allow you to draw the path and set a stroke on it without a fill on the shape itself.
It has a good collection of css shapes and icons with animation
at last i learn the css shape. Thanks Thanks Thanks Thanks Thanks Thanks Thanks Thanks a lot