css shapes Archives - CSS-Tricks

Article April 29, 2019

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

Author

16 Comments

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

Let’s have a look at how we can create a row of links that sorta run into each other with a chevron-like shape and notch on each block like you might see in a hierarchical breadcrumb navigation.

You’ve probably seen this pattern a lot. It comes up often in things like multi-step forms and site breadcrumbs. For our purposes we’re going to call these “ribbons" so we know what we’re referring … Read article

Link March 4, 2019

CSS Triangles, Multiple Ways

Shared by
Chris Coyier

I like Adam Laki's Quick Tip: CSS Triangles because it covers that ubiquitous fact about front-end techniques: there are always many ways to do the same thing. In this case, drawing a triangle can be done:

with border and a collapsed element
with clip-path: polygon()
with transform: rotate() and overflow: hidden
with glyphs like ▼

I'd say that the way I've typically done triangles the most over the years is with the border trick, but I think my favorite … Read article

Our Notes / Read at pineco.de

clip-path css shapes glyphs SVG triangle

Link December 17, 2018

A CSS Venn Diagram

Shared by
Robin Rendle

This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.

I also think it’s super cute that Adrian has made the code snippets in this post look like the display from an old monitor, like the one Chris recently broke down.… Read article

Our Notes / Read at adrianroselli.com

charts css grid css shapes shape-outside