Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

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
The post Oh, the Many Ways to Make Triangular Breadcrumb Ribbons! appeared first on CSS-Tricks.

Link: https://css-tricks.com/oh-the-many-ways-to-make-triangular-breadcrumb-ribbons/

CSS Triangles, Multiple Ways

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
The post CSS Triangles, Multiple Ways appeared first on CSS-Tricks.

Link: https://pineco.de/quick-tip-css-triangles/

A CSS Venn Diagram

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.…
The post A CSS Venn Diagram appeared first on CSS-Tricks.

Link: http://adrianroselli.com/2018/12/a-css-venn-diagram.html

Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor

CSS Shapes lets your web designs break out of the rectangular grid. Using a new CSS standard, text can flow, images can be rounded, even just a few non parallel lines can make your site stand out and make your brand distinctive. With the Shape Path Editor in Firefox 62 you can visually edit the shape directly from the CSS inspector, using Firefox Developer Tools to select the element whose shape you want to modify.

Link: https://hacks.mozilla.org/2018/09/make-your-web-layouts-bust-out-of-the-rectangle-with-the-firefox-shape-path-editor/