透過 ::before 偽元素繪製的 CSS 三角形，是由一個零尺寸的元素所構成,該元素的邊框形成可見的形狀,其中兩個透明邊框構成斜面,一個有色邊框指向所選方向。這個模式將邊框幾何以明確的長寫宣告撰寫,而非合併為單一簡寫行,讓幾何在樣式表中保持可見,且繪製結果在單一像素內等於所要求的寬度和高度。元素本身尺寸為 0 乘 0,因此渲染成本幾乎為零,可以附加到任何已具備內容或定位上下文的區塊層級元素上。CSS 三角形產生器會在同步的 CSS 和 HTML 中產生這組精確的宣告,然後提供即時預覽,讓方向、大小和顏色在任何程式碼離開頁面之前即可確認。預設輸出是一個帶有生成類別和 aria-hidden 的單一 div,但將宣告移入 ::before(或 ::after)偽元素是一個機械式的變更,並不會改變邊框運算。一旦幾何正確,唯一剩下的考量就是與頁面背景的對比、該三角形所傳達的任何狀態的可存取性,以及在縮放和強制色彩下的行為。
CSS 邊框三角形是如何構成的
訣竅在於將寬度和高度保持為零,讓四個邊框負責繪製。在兩個邊框於轉角處相交的位置,瀏覽器會在它們之間繪製一條對角接縫。兩側的透明接縫與一側的有色接縫會產生一個三邊的楔形。元素本身不會產生可測量的框,因此版面、變換和點擊測試會遵循已繪製的邊框,而非內容區域。
兩條規則支配著這些運算,產生器都會明確套用:
- 對於垂直三角形(向上或向下),兩個透明側邊框必須相加為所要求的寬度,而有色邊框必須等於所要求的高度。
- 對於水平三角形(向左或向右),透明的頂部和底部邊框必須相加為所要求的高度,而有色邊框必須等於所要求的寬度。
偶數尺寸可以整除。奇數總和則採用下限與上限的分配方式,因為 Chromium 可能會將兩個 20.5px 的邊框量化為各 20px,而無聲地損失一個像素。指定 41px 的基底會產生一個 20px 的透明側邊和一個 21px 的透明側邊,無論由哪個渲染器繪製,結果永遠是 41px。實作會明確寫出每個長寫屬性,讓幾何保持可見且可稽核,而非合併為單一簡寫行。
| 方向 | 有色邊框 | 透明邊框(斜面) | 基底運算 |
|---|---|---|---|
| 向上 | 底部 | 左、右 | 垂直:透明對邊等於寬度,有色邊框等於高度 |
| 向下 | 頂部 | 左、右 | 垂直:透明對邊等於寬度,有色邊框等於高度 |
| 向左 | 右側 | 頂部、底部 | 水平:透明對邊等於高度,有色邊框等於寬度 |
| 向右 | 左側 | 頂部、底部 | 水平:透明對邊等於高度,有色邊框等於寬度 |
逐步產生三角形
- 開啟 CSS 三角形產生器,並從四個方向中選擇一個:向上、向下、向左或向右。
- 輸入可見的寬度和高度。可接受 10 到 300 像素之間的整數,該欄位會拒絕小數和超出該範圍的值,而不是靜默地夾合。
- 輸入帶有前置井字號的六位數 HEX 顏色,例如 #1f6feb。輸入會被正規化為小寫,產生器會拒絕格式錯誤的顏色,而不是代入預設值。
- 在三角形將被使用的近似大小和背景上檢查即時預覽。預覽使用與 CSS 輸出中顯示的相同邊框宣告,因此所見即所複製。
- 點擊 Copy CSS 複製邊框宣告,然後點擊 Copy HTML 複製程式碼片段。每個按鈕會分別要求剪貼簿權限,並誠實地回報成功或拒絕;若瀏覽器拒絕剪貼簿存取,兩個程式碼區塊仍會保持可見以供手動選取,且頁面不會虛報成功。
- 若產生的類別會與現有樣式表衝突,請重新命名,並同步更新兩個輸出,以確保 HTML 仍與 CSS 對應。
將輸出移入 ::before 偽元素
HTML 輸出是一個帶有單一類別的 div。若要以 ::before 偽元素呈現相同的三角形,請完全移除該 div,並將邊框宣告貼到限定父元素範圍的 ::before 規則下。邊框運算完全相同;只有承載者改變。
在 #1f6feb 中要求一個 41px 寬、30px 高的向上三角形,會產生如下所示的 CSS:
.lizely-triangle { border-left: 20px solid transparent; border-right: 21px solid transparent; border-bottom: 30px solid #1f6feb; }
繪製的總基底為 20px + 21px = 41px,而有色邊框等於所要求的 30px 高度。向上三角形只需要底部的有色邊框來繪製,因此不需要其他邊框側,寬度和高度保持為零。
作為偽元素套用時,規則變為:
.callout::before { content: ""; border-left: 20px solid transparent; border-right: 21px solid transparent; border-bottom: 30px solid #1f6feb; }
content: "" 宣告是偽元素能夠呈現的必要條件。父元素應為 position: relative 或以其他方式定位自己的框,否則三角形會位於文件原點。偽元素預設不屬於可存取性樹的一部分,因此 div 版本的 aria-hidden 屬性變得不必要;輔助技術預設就會忽略產生的內容。若該三角形承載意義,例如狀態、方向、驗證回饋或導覽提示,請將可存取的標籤加入父控制項,而非僅依賴形狀本身。
邊框三角形的限制
邊框三角形在程式碼上簡潔且尺寸精確,但結構上也有其限制。元素的可測量內容框為零,但其繪製的邊框佔據空間,因此版面、變換、點擊測試、外框、溢位和對齊的表現,可能不如具有明確 viewBox 的向量形狀直觀。邊框三角形本身無法產生圓角尖端、弧形邊緣、空心形狀、漸層填色、描邊、複雜陰影或任意多邊形。
| 需求 | 邊框三角形(本產生器) | 替代方案 |
|---|---|---|
| 實心三邊楔形,向上/向下/向左/向右 | 完全符合 — 一鍵產生 | — |
| 圓角尖端或弧形邊緣 | 不支援 | 具有 stroke-linejoin 的 SVG 多邊形 |
| 空心或描邊形狀 | 不支援 | 使用 fill-rule 或 clip-path 的 SVG |
| 楔形內的漸層填色或陰影 | 不支援(邊框顏色為不透明實心) | 在裁切的 div 上使用 SVG 或 CSS conic/linear-gradient |
| 來自 currentColor、CSS 變數或 alpha 的主題感知顏色 | 不會產生(僅限十六進制字面值) | 複製後將字面值替換為可信賴的設計權杖 |
所選的 HEX 顏色會以不透明邊框繪製;本專注的工具不會產生 alpha 顏色、CSS 變數、漸層、currentColor 和廣色域語法。複製後,將字面值替換為可信賴的設計權杖可以改善主題化,但請確認目標語法受到支援,並且透明的側邊框仍保持透明,而不是繼承權杖顏色。
裝飾性三角形的可存取性與對比
純粹作為裝飾使用的三角形,例如工具提示箭頭或區段分隔線,不應出現在可存取性樹中。預設的 HTML 輸出已帶有 aria-hidden="true",而偽元素預設會被輔助技術忽略,因此任一形式皆符合該要求。當形狀傳達狀態、方向、驗證或導覽提示時,請勿僅依賴視覺;請將可見文字或可存取的標籤加入周圍的互動控制項,並讓裝飾性三角形對輔助技術保持隱藏。
顏色是另一個軸。三角形以實心不透明的楔形繪製,因此對比取決於其下方的頁面背景。三角形旁的文字應在淺色和深色主題中檢查對比,而非假設其繼承足夠的對比。在頁面上線前,請依據 WCAG AA 和 AAA 驗證任何文字與背景配對,並在強制色彩下重新測試,因為不透明繪製的邊框不會自動採用系統色彩。
在上線前測試結果
三項快速檢查可以捕捉大部分的迴歸問題:
- 在淺色和深色背景上呈現父元素,並確認有色邊框仍符合對比;透明側必須保持透明,而不是繼承父元素顏色。
- 以 200% 縮放和常見的行動裝置寬度開啟頁面,並確認三角形仍與目標控制項對齊。即使 CSS 精確,光柵化仍可能因縮放層級和裝置像素比而有所不同。
- 在啟用強制色彩模式的情況下檢查,並確認該形狀要麼繼承系統色彩,要麼仍為可用的操作提示;不透明繪製的邊框不會自動切換至系統調色盤。
單一三角形的效能成本可忽略不計,但數百個裝飾性元素仍會增加 DOM 和繪製工作量。請優先使用具有裝飾形狀的單一語意控制項,而不是重複的隱藏控制項。作為底層屬性的參考,CSS 背景與邊框的 MDN 指南記錄了 border-width、border-style 和 border-color 的行為,而 CSS 背景與邊框 Level 3規範定義了此處使用的長寫宣告。本產生器中的精確尺寸限制和方向序列化,是刻意設計的局部產品規則,由四方向、奇數尺寸、精確輸出和邊界測試所涵蓋,而不是通用的三角形標準。
若要深入了解,請參閱 CSS After 三角形產生器:實心邊框三角形。
若要深入了解,請參閱 CSS 核取方塊產生器:是否涵蓋停用和錯誤狀態?。