多種制作三角形面包屑條帶的方法

本文探討如何創(chuàng)建一系列相互連接的鏈接，它們呈現(xiàn)出類似于階梯式面包屑導(dǎo)航中所見的V形形狀和每個區(qū)塊上的凹口。

這種樣式在網(wǎng)頁設(shè)計中很常見，例如多步驟表單和網(wǎng)站面包屑導(dǎo)航。我們將這些樣式稱為“條帶”，以便于理解。

與許多網(wǎng)頁元素一樣，我們可以通過多種方法創(chuàng)建這些條帶！我創(chuàng)建了一個演示頁面，其中包含多種方法，例如使用CSS三角形、SVG背景和CSS clip-path屬性。

HTML結(jié)構(gòu)

每個演示的HTML結(jié)構(gòu)基本相同，包含一個充當(dāng)父元素的<nav></nav>元素和作為子元素的鏈接。

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

請注意，根據(jù)A11y Style Guide網(wǎng)站，這些元素應(yīng)符合無障礙性標(biāo)準(zhǔn)。在設(shè)計組件時，務(wù)必考慮無障礙性，并在一開始就引入無障礙性是避免出現(xiàn)“忘記添加無障礙性”問題的最佳方法。

基礎(chǔ)樣式

對于這類樣式，我們需要確保元素大小正確。為此，我們將定義.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;
}

這種技術(shù)有利于定義每個條帶的三角形形狀大小，因為我們將使用相同的大小來計算三角形。由于我們使用em單位來計算條帶元素的大小，我們可以通過重新定義包裝元素的字體大小來調(diào)整所有元素的大小。

讓我們使用CSS Grid進行布局，因為我們可以這樣做。我們可以使用更廣泛支持瀏覽器的方法來實現(xiàn)，但這取決于您的支持需求。

我們將定義四列：

• 三列用于條帶元素
• 一列用于解決間距問題。按原樣，右箭頭形狀將放置在條帶組件的外部，這可能會弄亂原始布局。

/* 包裝元素
 * 我們使用CSS Grid，但請確保它符合您的瀏覽器支持要求。
 * 假設(shè)使用autoprefixer進行供應(yīng)商前綴和屬性。
 */

.ribbon {
  display: grid;
  grid-gap: 1px;
  grid-template-columns: repeat(auto-fill, 1fr) 1em; /* 自動填充三個條帶元素加上一列窄列以解決大小問題 */
}

如果您希望避免拉伸條帶元素，則可以不同地定義網(wǎng)格。例如，我們可以使用max-content根據(jù)內(nèi)容大小調(diào)整列。（但是，請注意，max-content在某些主要瀏覽器中尚不支持。）

/* 使條帶列根據(jù)最大內(nèi)容大小調(diào)整 */
.ribbon--auto {
  grid-template-columns: repeat(3, max-content) 1em;
}

我相信有很多不同的方法可以進行布局。我喜歡這種方法，因為它定義了條帶元素之間的確切間隙，無需復(fù)雜的計算。

無障礙性不僅僅是添加aria屬性。它還包括顏色對比度和可讀性，以及添加懸停和焦點狀態(tài)。如果您不喜歡輪廓樣式，可以使用其他CSS屬性，例如box-shadow。

/* 使用當(dāng)前鏈接顏色，但在懸停時添加下劃線 */
.ribbon__element:hover,
.ribbon__element:active {
  color: inherit;
  text-decoration: underline;
}

/* 清除默認(rèn)輪廓樣式并使用內(nèi)嵌盒陰影表示焦點狀態(tài) */
.ribbon__element:focus {
  box-shadow: inset 0 -3px 0 0 #343435;
  outline: none;
}

創(chuàng)建獨特的三角形形狀

在定義每個條帶末尾的三角形時，我們有多種選擇。我們可以：

1. 使用偽元素和邊框創(chuàng)建三角形
2. 在偽元素上使用SVG背景圖像
3. 使用內(nèi)聯(lián)SVG圖像
4. 使用polygon()函數(shù)創(chuàng)建clip-path

讓我們深入研究每一個。

方法一：邊框方法

首先，我們應(yīng)該將元素的寬度和高度設(shè)置為零，這樣它就不會妨礙我們用來繪制三角形的偽元素。然后，我們應(yīng)該使用邊框繪制三角形，具體來說，是定義與背景顏色匹配的實心左邊框，使其與條帶的其余部分融合。接下來，讓我們定義頂部和底部邊框，并將其設(shè)置為透明。這里的技巧是計算邊框的大小。

我們的條帶元素的內(nèi)容大小為行高值加上頂部和底部填充：

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

這意味著我們的頂部和底部邊框應(yīng)該為此大小的一半。唯一剩下的就是將元素絕對定位到組件的正確側(cè)邊。

/* 左箭頭 */
.ribbon--alpha .ribbon__element:before {
  /* 使內(nèi)容大小為零 */
  content: '';
  height: 0;
  width: 0;

  /* 使用邊框使偽元素適合條帶大小 */
  border-bottom: 1.333em solid transparent;
  border-left: 0.667em solid #fff;
  border-top: 1.333em solid transparent;

  /* 將元素絕對定位在條帶元素的左側(cè) */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

/* 右箭頭 */
.ribbon--alpha .ribbon__element:after {
  /* 使內(nèi)容大小為零 */
  content: '';
  height: 0;
  width: 0;

  /* 使用邊框使偽元素適合條帶大小 */
  border-bottom: 1.333em solid transparent;
  border-left: 0.667em solid;
  border-top: 1.333em solid transparent;

  /* 將元素絕對定位在條帶元素的右側(cè)并將其推到外部 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: translateX(0.667em);
  transform: translateX(0.667em);
}

由于右三角形應(yīng)與條帶的背景顏色匹配，因此請記住為每個條帶的偽元素添加正確的邊框顏色。

/* 第一個元素的右箭頭 */
.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;
}

就是這樣！

方法二：背景圖像方法

我們還可以使用背景圖像創(chuàng)建三角形。這需要創(chuàng)建與設(shè)計匹配的圖像，這有點麻煩，但仍然完全有可能。我們將在這里使用SVG，因為它在任何分辨率下都很流暢。

與邊框三角形方法不同，我們希望將偽元素的高度與條帶元素的高度（或100%）匹配。組件的寬度應(yīng)與邊框三角形的左邊界寬度匹配，在我們的例子中為0.666666em。然后，我們應(yīng)該在左側(cè)三角形上使用白色三角形作為背景圖像，然后在右側(cè)三角形上使用彩色三角形圖像。同樣，我們使用絕對定位將三角形放置到條帶元素的正確側(cè)邊。

/* 左箭頭 */
.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%;

  /* 將元素絕對定位在條帶元素的左側(cè) */
  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%;

  /* 將元素絕對定位在條帶元素的右側(cè)并將其推到外部 */
  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=);
}

就是這樣！

其余部分與原文相似，只是對語句進行了調(diào)整和替換，保持了原文意思不變。 由于篇幅限制，這里不再贅述。 請參考原文繼續(xù)學(xué)習(xí)剩余部分。

以上是哦，制作三角形面包絲帶的許多方法！的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！