哦，制作三角形面包丝带的许多方法！

多种制作三角形面包屑条带的方法

本文探讨如何创建一系列相互连接的链接，它们呈现出类似于阶梯式面包屑导航中所见的V形形状和每个区块上的凹口。

这种样式在网页设计中很常见，例如多步骤表单和网站面包屑导航。我们将这些样式称为“条带”，以便于理解。

与许多网页元素一样，我们可以通过多种方法创建这些条带！我创建了一个演示页面，其中包含多种方法，例如使用CSS三角形、SVG背景和CSS clip-path属性。

HTML结构

每个演示的HTML结构基本相同，包含一个充当父元素的<nav></nav>元素和作为子元素的链接。

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

请注意，根据A11y Style Guide网站，这些元素应符合无障碍性标准。在设计组件时，务必考虑无障碍性，并在一开始就引入无障碍性是避免出现“忘记添加无障碍性”问题的最佳方法。

基础样式

对于这类样式，我们需要确保元素大小正确。为此，我们将定义.ribbon（我们将这些元素称为“条带”）包装元素的字体大小，然后在子元素（链接）上使用em单位。

/* 定义包装元素的字体大小 */
.ribbon {
  font-size: 15px;
}

/* 使用em单位定义条带元素的大小 */
.ribbon__element {
  font-size: 1.5em;
  letter-spacing: 0.01em;
  line-height: 1.333em;
  padding: 0.667em 0.667em 0.667em 1.333em;
}

这种技术有利于定义每个条带的三角形形状大小，因为我们将使用相同的大小来计算三角形。由于我们使用em单位来计算条带元素的大小，我们可以通过重新定义包装元素的字体大小来调整所有元素的大小。

让我们使用CSS Grid进行布局，因为我们可以这样做。我们可以使用更广泛支持浏览器的方法来实现，但这取决于您的支持需求。

我们将定义四列：

• 三列用于条带元素
• 一列用于解决间距问题。按原样，右箭头形状将放置在条带组件的外部，这可能会弄乱原始布局。

/* 包装元素
 * 我们使用CSS Grid，但请确保它符合您的浏览器支持要求。
 * 假设使用autoprefixer进行供应商前缀和属性。
 */

.ribbon {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(auto-fill, 1fr) 1em; /* 自动填充三个条带元素加上一列窄列以解决大小问题 */
}

如果您希望避免拉伸条带元素，则可以不同地定义网格。例如，我们可以使用max-content根据内容大小调整列。（但是，请注意，max-content在某些主要浏览器中尚不支持。）

/* 使条带列根据最大内容大小调整 */
.ribbon--auto {
  grid-template-columns: repeat(3, max-content) 1em;
}

我相信有很多不同的方法可以进行布局。我喜欢这种方法，因为它定义了条带元素之间的确切间隙，无需复杂的计算。

无障碍性不仅仅是添加aria属性。它还包括颜色对比度和可读性，以及添加悬停和焦点状态。如果您不喜欢轮廓样式，可以使用其他CSS属性，例如box-shadow。

/* 使用当前链接颜色，但在悬停时添加下划线 */
.ribbon__element:hover,
.ribbon__element:active {
  color: inherit;
  text-decoration: underline;
}

/* 清除默认轮廓样式并使用内嵌盒阴影表示焦点状态 */
.ribbon__element:focus {
  box-shadow: inset 0 -3px 0 0 #343435;
  outline: none;
}

创建独特的三角形形状

在定义每个条带末尾的三角形时，我们有多种选择。我们可以：

1. 使用伪元素和边框创建三角形
2. 在伪元素上使用SVG背景图像
3. 使用内联SVG图像
4. 使用polygon()函数创建clip-path

让我们深入研究每一个。

方法一：边框方法

首先，我们应该将元素的宽度和高度设置为零，这样它就不会妨碍我们用来绘制三角形的伪元素。然后，我们应该使用边框绘制三角形，具体来说，是定义与背景颜色匹配的实心左边框，使其与条带的其余部分融合。接下来，让我们定义顶部和底部边框，并将其设置为透明。这里的技巧是计算边框的大小。

我们的条带元素的内容大小为行高值加上顶部和底部填充：

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

这意味着我们的顶部和底部边框应该为此大小的一半。唯一剩下的就是将元素绝对定位到组件的正确侧边。

/* 左箭头 */
.ribbon--alpha .ribbon__element:before {
  /* 使内容大小为零 */
  content: '';
  height: 0;
  width: 0;

  /* 使用边框使伪元素适合条带大小 */
  border-bottom: 1.333em solid transparent;
  border-left: 0.667em solid #fff;
  border-top: 1.333em solid transparent;

  /* 将元素绝对定位在条带元素的左侧 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

/* 右箭头 */
.ribbon--alpha .ribbon__element:after {
  /* 使内容大小为零 */
  content: '';
  height: 0;
  width: 0;

  /* 使用边框使伪元素适合条带大小 */
  border-bottom: 1.333em solid transparent;
  border-left: 0.667em solid;
  border-top: 1.333em solid transparent;

  /* 将元素绝对定位在条带元素的右侧并将其推到外部 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(0.667em);
  transform: translateX(0.667em);
}

由于右三角形应与条带的背景颜色匹配，因此请记住为每个条带的伪元素添加正确的边框颜色。

/* 第一个元素的右箭头 */
.ribbon--alpha .ribbon__element:nth-child(1):after {
  border-left-color: #11d295;
}

/* 第二个元素的右箭头 */
.ribbon--alpha .ribbon__element:nth-child(2):after {
  border-left-color: #ef3675;
}

/* 第三个元素的右箭头 */
.ribbon--alpha .ribbon__element:nth-child(3):after {
  border-left-color: #4cd4e9;
}

就是这样！

方法二：背景图像方法

我们还可以使用背景图像创建三角形。这需要创建与设计匹配的图像，这有点麻烦，但仍然完全有可能。我们将在这里使用SVG，因为它在任何分辨率下都很流畅。

与边框三角形方法不同，我们希望将伪元素的高度与条带元素的高度（或100%）匹配。组件的宽度应与边框三角形的左边界宽度匹配，在我们的例子中为0.666666em。然后，我们应该在左侧三角形上使用白色三角形作为背景图像，然后在右侧三角形上使用彩色三角形图像。同样，我们使用绝对定位将三角形放置到条带元素的正确侧边。

/* 左箭头 */
.ribbon--beta .ribbon__element:before {
  /* 定义箭头大小 */
  content: '';
  height: 100%;
  width: 0.666666em;

  /* 定义与背景颜色匹配的背景图像 */
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 100%;

  /* 将元素绝对定位在条带元素的左侧 */
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
}

/* 右箭头 */
.ribbon--beta .ribbon__element:after {
  /* 定义箭头大小 */
  content: '';
  height: 100%;
  width: 0.667em;

  /* 定义背景图像属性 */
  background-position: center left;
  background-repeat: no-repeat;
  background-size: 100%;

  /* 将元素绝对定位在条带元素的右侧并将其推到外部 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(0.667em);
  transform: translateX(0.667em);
}

/* 定义与第一个元素的背景颜色匹配的背景图像 */
.ribbon--beta .ribbon__element:nth-child(1):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjMTFkMjk1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* 定义与第二个元素的背景颜色匹配的背景图像 */
.ribbon--beta .ribbon__element:nth-child(2):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjZWYzNjc1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* 定义与第三个元素的背景颜色匹配的背景图像 */
.ribbon--beta .ribbon__element:nth-child(3):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjNGNkNGU5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

就是这样！

其余部分与原文相似，只是对语句进行了调整和替换，保持了原文意思不变。 由于篇幅限制，这里不再赘述。 请参考原文继续学习剩余部分。

以上是哦，制作三角形面包丝带的许多方法！的详细内容。更多信息请关注PHP中文网其他相关文章！