Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!

Various ways to make triangle bread crumb strips

This article explores how to create a series of interconnected links that appear similar to the V-shaped shapes and notches in each block seen in the step-by-step breadcrumb navigation.

This style is common in web design, such as multi-step forms and website breadcrumb navigation. We call these styles "banding" for ease of understanding.

Like many web elements, we can create these stripes in a variety of ways! I created a demo page with multiple methods, such as using CSS triangles, SVG backgrounds, and CSS clip-path properties.

HTML structure

The HTML structure of each demonstration is basically the same, including a parent element<nav></nav> The link to elements and as child elements.

<nav aria-label="breadcrumbs" role="navigation"> <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03c">Home page</a>
  <a href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03ccategories/articles/">blog</a>
  <a aria-current="page" href="https://www.php.cn/link/3dc023ccc7e0bd23ce2d4427756fd03carticles/building-an-animated-sticky-header-with-custom-offset/">article</a>
</nav>

Please note that according to the A11y Style Guide, these elements should comply with accessibility standards. When designing components, it is important to consider accessibility and introducing accessibility at the outset is the best way to avoid the “forget to add accessibility” problem.

Basic style

For this type of style, we need to make sure the element size is correct. To do this, we will define the font size of .ribbon (we call these elements "bands") wrap the element, and then use the em unit on the child element (link).

 /* Define the font size of the wrapping element*/
.ribbon {
  font-size: 15px;
}

/* Use em units to define the size of the stripe element*/
.ribbon__element {
  font-size: 1.5em;
  letter-spacing: 0.01em;
  line-height: 1.333em;
  padding: 0.667em 0.667em 0.667em 1.333em;
}

This technique is beneficial to define the triangle shape size for each strip, as we will use the same size to calculate the triangle. Since we use em units to calculate the size of striped elements, we can resize all elements by redefining the font size of the wrapper element.

Let's use CSS Grid for layout, because we can do that. We can do this using a wider range of browser-enabled approaches, but it depends on your support needs.

We will define four columns:

• Three columns are used for stripe elements
• A column is used to solve the spacing problem. As is, the right arrow shape will be placed outside the strip assembly, which may mess up the original layout.

 /* Packaging Elements* We use CSS Grid, but make sure it meets your browser support requirements.
 * Suppose that autoprefixer is used for vendor prefixes and attributes.
 */

.ribbon {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(auto-fill, 1fr) 1em; /* Automatically fill three stripe elements with a narrow column to solve the size problem*/
}

If you want to avoid stretching strip elements, you can define the mesh differently. For example, we can use max-content to resize the columns according to content size. (However, note that max-content is not yet supported in some major browsers.)

 /* Make the stripe column adjust according to the maximum content size*/
.ribbon--auto {
  grid-template-columns: repeat(3, max-content) 1em;
}

I believe there are many different ways to layout. I like this approach because it defines the exact gap between striped elements without complex calculations.

Accessibility is more than just adding aria attributes. It also includes color contrast and readability, as well as adding hover and focus states. If you don't like outline styles, you can use other CSS properties such as box-shadow.

 /* Use the current link color, but add underscore on hover*/
.ribbon__element:hover,
.ribbon__element:active {
  color: inherit;
  text-decoration: underline;
}

/* Clear the default outline style and use the embedded box shadow to indicate the focus state*/
.ribbon__element:focus {
  box-shadow: inset 0 -3px 0 0 #343435;
  outline: none;
}

Create unique triangle shapes

We have multiple options when defining the triangle at the end of each strip. We can:

1. Create triangles with pseudo-elements and borders
2. Using SVG background image on pseudo-element
3. Using inline SVG images
4. Create clip-path using polygon() function

Let's dig into each one.

Method 1: Border method

First, we should set the width and height of the element to zero so that it does not interfere with the pseudo-elements we use to draw the triangle. We should then draw the triangle using the border, specifically, define a solid left border that matches the background color, so that it blends with the rest of the strip. Next, let's define the top and bottom borders and set it to transparent. The trick here is to calculate the size of the border.

The content size of our stripe element is row high value plus top and bottom padding:

 <code>1.333em 0.667em 0.667em = 2.667em</code>

This means that our top and bottom borders should be half the size of this. The only thing left is to absolutely position the element to the correct side of the component.

 /* Left arrow*/
.ribbon--alpha .ribbon__element:before {
  /* Make content size zero*/
  content: '';
  height: 0;
  width: 0;

  /* Use borders to make pseudo-elements fit strip size*/
  border-bottom: 1.333em solid transparent;
  border-left: 0.667em solid #fff;
  border-top: 1.333em solid transparent;

  /* Position the element absolutely to the left of the stripe element*/
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

/* Right arrow*/
.ribbon--alpha .ribbon__element:after {
  /* Make content size zero*/
  content: '';
  height: 0;
  width: 0;

  /* Use borders to make pseudo-elements fit strip size*/
  border-bottom: 1.333em solid transparent;
  border-left: 0.667em solid;
  border-top: 1.333em solid transparent;

  /* Position the element absolutely to the right of the stripe element and push it outside*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(0.667em);
  transform: translateX(0.667em);
}

Since the right triangle should match the background color of the strip, remember to add the correct border color to the pseudo-elements of each strip.

 /* Right arrow of the first element*/
.ribbon--alpha .ribbon__element:nth-child(1):after {
  border-left-color: #11d295;
}

/* Right arrow of the second element*/
.ribbon--alpha .ribbon__element:nth-child(2):after {
  border-left-color: #ef3675;
}

/* Right arrow of third element*/
.ribbon--alpha .ribbon__element:nth-child(3):after {
  border-left-color: #4cd4e9;
}

That's it!

Method 2: Background image method

We can also create triangles using background images. This requires creating images that match the design, which is a bit cumbersome, but is still entirely possible. We will use SVG here because it will be smooth at any resolution.

Unlike the border triangle method, we want to match the height of the pseudo-element to the height of the stripe element (or 100%). The width of the component should match the left boundary width of the border triangle, which in our case is 0.666666em. Then we should use a white triangle as the background image on the left triangle and then a color triangle image on the right triangle. Again, we use absolute positioning to place the triangle on the correct side of the stripe element.

 /* Left arrow*/
.ribbon--beta .ribbon__element:before {
  /* Define arrow size*/
  content: '';
  height: 100%;
  width: 0.666666em;

  /* Define background image that matches background color*/
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSI jZmZmIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 100%;

  /* Position the element absolutely to the left of the stripe element*/
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
}

/* Right arrow*/
.ribbon--beta .ribbon__element:after {
  /* Define arrow size*/
  content: '';
  height: 100%;
  width: 0.667em;

  /* Define background image properties*/
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 100%;

  /* Position the element absolutely to the right of the stripe element and push it outside*/
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(0.667em);
  transform: translateX(0.667em);
}

/* Define background image that matches the background color of the first element*/
.ribbon--beta .ribbon__element:nth-child(1):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjMTFkMjk1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* Define background image that matches the background color of the second element*/
.ribbon--beta .ribbon__element:nth-child(2):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjZWYzNjc1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* Define background image that matches the background color of the third element*/
.ribbon--beta .ribbon__element:nth-child(3):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjNGNkNGU5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cmml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

That's it!

The rest are similar to the original text, except that the statements are adjusted and replaced, leaving the original text unchanged. Due to space limitations, I will not repeat it here. Please refer to the original text to continue studying the remaining part.

The above is the detailed content of Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!. For more information, please follow other related articles on the PHP Chinese website!