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

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

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

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

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

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

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

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

基礎(chǔ)樣式

對(duì)于這類(lèi)樣式，我們需要確保元素大小正確。為此，我們將定義.ribbon（我們將這些元素稱(chēng)為“條帶”）包裝元素的字體大小，然后在子元素（鏈接）上使用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ù)有利于定義每個(gè)條帶的三角形形狀大小，因?yàn)槲覀儗⑹褂孟嗤拇笮?lái)計(jì)算三角形。由于我們使用em單位來(lái)計(jì)算條帶元素的大小，我們可以通過(guò)重新定義包裝元素的字體大小來(lái)調(diào)整所有元素的大小。

讓我們使用CSS Grid進(jìn)行布局，因?yàn)槲覀兛梢赃@樣做。我們可以使用更廣泛支持瀏覽器的方法來(lái)實(shí)現(xiàn)，但這取決于您的支持需求。

我們將定義四列：

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

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

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

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

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

我相信有很多不同的方法可以進(jìn)行布局。我喜歡這種方法，因?yàn)樗x了條帶元素之間的確切間隙，無(wú)需復(fù)雜的計(jì)算。

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

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

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

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

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

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

讓我們深入研究每一個(gè)。

方法一：邊框方法

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

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

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

這意味著我們的頂部和底部邊框應(yīng)該為此大小的一半。唯一剩下的就是將元素絕對(duì)定位到組件的正確側(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;

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

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

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

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

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

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

就是這樣！

方法二：背景圖像方法

我們還可以使用背景圖像創(chuàng)建三角形。這需要?jiǎng)?chuàng)建與設(shè)計(jì)匹配的圖像，這有點(diǎn)麻煩，但仍然完全有可能。我們將在這里使用SVG，因?yàn)樗谌魏畏直媛氏露己芰鲿场?/p>

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

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

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

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

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

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

就是這樣！

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

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