Ribbon

You could find out how to build the ribbon component in the following examples. The HTML structure:

<nav class="ribbon ribbon--modifier" role="navigation" aria-label="breadcrumbs">
  <a class="ribbon__element" href="https://www.silvestar.codes/">Home</a>
  <a class="ribbon__element" href="https://www.silvestar.codes/categories/articles/">Blog</a>
  <a class="ribbon__element" href="https://www.silvestar.codes/articles/building-an-animated-sticky-header-with-custom-offset/" aria-current="page">Post</a>
</nav>

where ribbon--modifier is a modifier class. The following modifier classes are available:

• ribbon--alpha - the ribbon component made with CSS triangles,
• ribbon--beta - the ribbon component made with SVG backgrounds,
• ribbon--gamma - the ribbon component made with CSS clip path,
• ribbon--shadow - the ribbon component with a drop shadow,
• ribbon--gradient - the ribbon component with a linear gradient background,
• ribbon--small - the small ribbon component, and
• ribbon--big - the big ribbon component.

The CSS code:

/* The wrapper element */
.ribbon {
  display: grid;
  font-size: 15px;
  grid-gap: 1px;
  grid-template-columns: repeat(3, 1fr) 1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 40px;
  width: 100%;
}

/* The ribbon element */
.ribbon__element {
  background-color: #11d295;
  color: #fff;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.333em;
  padding: 0.667em 0 0.667em 1.333em;
  position: relative;
}

/* States */
.ribbon__element:hover,
.ribbon__element:focus,
.ribbon__element:active {
  color: inherit;
  text-decoration: underline;
}