哦，製作三角形麵包絲帶的許多方法！

多種製作三角形麵包屑條帶的方法

本文探討如何創建一系列相互連接的鏈接，它們呈現出類似於階梯式麵包屑導航中所見的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,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBmaWxsPSI jZmZmIj48cGF0aCBkPSJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
  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,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjMTFkMjk1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* 定義與第二個元素的背景顏色匹配的背景圖像*/
.ribbon--beta .ribbon__element:nth-child(2):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjZWYzNjc1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

/* 定義與第三個元素的背景顏色匹配的背景圖像*/
.ribbon--beta .ribbon__element:nth-child(3):after {
  background-image: url(data:image/svg xml;base64,PHN2ZyBoZWlnaHQ9IjQwIiB2aWV3Qm94PSIwIDAgMTAgNDAiIHdpZHRoPSIxMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkP SJtNSAxNSAyMCAxMGgtNDB6IiBmaWxsPSIjNGNkNGU5IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0ibWF0cml4KDAgLTEgLTEgMCAyNSAyNSkiLz48L3N2Zz4=);
}

就是這樣！

其餘部分與原文相似，只是對語句進行了調整和替換，保持了原文意思不變。 由於篇幅限制，這裡不再贅述。 請參考原文繼續學習剩餘部分。

以上是哦，製作三角形麵包絲帶的許多方法！的詳細內容。更多資訊請關注PHP中文網其他相關文章！