CSS3 三角形產生器會建立經典的零尺寸邊框三角形,這在 CSS Backgrounds and Borders Level 3 規範中仍有定義。這個技巧是將元素的內容寬度和內容高度設為零,讓兩個透明邊框形成兩條斜邊,再將一個不透明邊框指派給三角形指向的那一邊。CSS 三角形產生器讓訪客從四個方向中選擇一個,輸入介於十到三百像素之間的寬度和高度,並提供一個嚴格的六位數十六進位顏色,然後以與複製輸出中出現的相同完整邊框宣告繪製即時預覽。CSS 和 HTML 保持同步,產生過程完全在當前瀏覽器分頁中執行,程式碼片段不含任何腳本、遠端請求、影像檔案或外部相依。對於裝飾用箭頭、分隔線和工具提示指標,這種純邊框方式體積小、無相依且易於稽核。本文其餘部分將逐步說明邊框技巧如何繪製三角形、四方向配方、保持奇數尺寸精確的上下取整分割、產生器預設採用的無障礙處理,以及在正式採用 CSS3 三角形之前必須了解的真實限制。
CSS3 邊框技巧如何繪製三角形
可見的形狀完全由邊框繪製,而不是由元素的內容區塊繪製。元素的內容寬度和內容高度都設為零,因此沒有可繪製的內容區域可供顯示。接著由四個邊框宣告中的三個來形成三角形:兩個透明邊框變成兩條斜邊,一個有顏色的邊框變成所選方向的底邊或尖端。CSS Backgrounds and Borders Level 3 規範將每個完整邊框的寬度、樣式和顏色各自獨立定義,這就是為什麼實作會明確寫出每個宣告,而非依賴簡寫形式。MDN 的 CSS 背景與邊框指南記錄了透明顏色行為,讓斜邊得以消失,而有顏色的邊框則保留其完整厚度。
當有顏色的邊框位於底部時,三角形朝上。當有顏色的邊框位於頂部時,三角形朝下。當有顏色的邊框位於左側時,三角形朝右。當有顏色的邊框位於右側時,三角形朝左。在任何情況下,元素本身在兩個維度上都測量為零像素,而繪製出的邊框共同佔據所要求的完整寬度和高度。這就是為什麼邊框三角形不能像一般區塊元素那樣對待:它具有零尺寸的內容區塊,但卻有非零的繪製區域,這會影響版面配置、點擊測試和對齊。
逐步產生 CSS3 三角形
- 選擇三角形方向(上、下、左或右),輸入可見的寬度和高度,並提供以井字號開頭的六位數十六進位顏色。接受從十到三百像素的整數值,而十六進位必須符合嚴格的井字號加六位十六進位數字格式。頁面會立即拒絕不支援的方向、格式錯誤的顏色、小數以及超出所述範圍的值,而不會默默地夾擠修正。
- 在三角形實際使用的近似尺寸和背景下檢查即時預覽。預覽由與 CSS 輸出中出現的相同衍生邊框宣告繪製,因此看到什麼就會複製到什麼。如果三角形緊鄰文字,請同時檢查在淺色和深色環境下的對比。
- 分別複製 CSS 和 HTML。每次複製請求會個別要求剪貼簿權限,並回報指出已複製格式的成功狀態。如果三角形純粹作為裝飾,請保留 aria-hidden="true" 屬性。如果三角形用於傳達狀態、方向、驗證或導覽,請替換或移除它,並在周圍的控制項上加上可見文字或無障礙標籤。如果產生的類別會與現有的樣式表衝突,請同時在兩個輸出中重新命名 lizely-triangle 類別並一起更新。
方向配方速查表
四方向配方建立在一個簡單的規則上:有顏色的邊框位於三角形指向的相反邊。對於上和下,有顏色的邊框是頂部或底部邊框,兩個透明的側邊框相加等於所要求的寬度。對於左和右,有顏色的邊框是左側或右側邊框,兩個透明的頂部與底部邊框相加等於所要求的高度。有顏色的邊框永遠承擔完整的指向維度。
| 方向 | 左邊框 | 右邊框 | 頂部邊框 | 底部邊框 |
|---|---|---|---|---|
| 上 | 透明(寬度分割) | 透明(寬度分割) | 0 | 高度(顏色) |
| 下 | 透明(寬度分割) | 透明(寬度分割) | 高度(顏色) | 0 |
| 右 | 0 | 寬度(顏色) | 透明(高度分割) | 透明(高度分割) |
| 左 | 寬度(顏色) | 0 | 透明(高度分割) | 透明(高度分割) |
偶數尺寸可以乾淨地分割為兩個相等的半。奇數尺寸則使用下取整和上取整值,下一節將詳細說明。
奇數底邊尺寸與上下取整分割
對於垂直三角形(上和下),兩個透明的側邊框必須相加等於所選的寬度,而有顏色的邊框必須等於所選的高度。對於水平三角形(左和右),兩個透明的頂部與底部邊框必須相加等於所選的高度,而有顏色的邊框必須等於所選的寬度。當垂直底邊是奇數像素時,兩個透明邊框之間的分割就很重要。
Chromium 可能會將單一條 20.5px 的邊框量化為 20px,因此兩條 20.5px 的邊框會默默地變成兩條 20px 邊框,失去所要求底邊的一整個像素。將 41 分割為 20 和 21,寫成 20px 和 21px,可讓繪製總和精確保持為 41px,因為上取整值補償了下取整值。像 40 這樣的偶數尺寸可以乾淨地分割為 20 和 20,因為偶數整數的下取整和上取整相同。
以一個向上的三角形為例,寬度 = 41,高度 = 50,顏色 = #007bff:border-left 變成 20px solid transparent,border-right 變成 21px solid transparent,border-bottom 變成 50px solid #007bff,border-top 則維持為零。兩個透明的側邊框相加為 20 + 21 = 41 像素,完全符合所要求的寬度,而有顏色的邊框提供完整的 50 像素高度。輸出絕不會默默從要求中捨棄像素,也絕不會默默夾擠修正數值;不支援的輸入會直接被拒絕。
無障礙性與 aria-hidden 的選擇
預設的 HTML 片段包含一個帶有產生類別和 aria-hidden="true" 的單一 div。該屬性會對輔助技術隱藏三角形,當形狀純粹作為裝飾時,例如工具提示指標、標題下方的分隔線或除了視覺點綴外別無意義的箭頭,這是正確的處理方式。裝飾性形狀應該被隱藏,這樣螢幕閱讀器才不會朗讀出空白或無意義的內容。
如果三角形用於傳達狀態、方向、驗證或導覽,請勿僅依賴這個靜默的片段。請在周圍的互動控制項上加上可見文字或無障礙標籤,並將裝飾性三角形對輔助技術保持隱藏。例如,「Sort by」標籤旁的下拉箭頭應保留可見標籤,並將三角形僅用作裝飾;若上一頁和下一頁按鈕的唯一內容就是三角形,則按鈕元素本身需要一個無障礙名稱。
緊鄰文字使用的三角形也應在淺色與深色主題中檢查,而非預設其繼承了足夠的對比。所選擇的十六進位顏色會以不透明邊框繪製,因此這個專注的工具不會產生 alpha 顏色、漸層、currentColor、廣色域語法和主題權杖。複製後,將字面值替換為可信的設計權杖可以改善主題化,但請確認目標語法在目的樣式表中受到支援,並且透明的側邊框仍然保持透明。
邊框技巧無法做到的事
邊框三角形體積小,但有實際的限制。元素可測量的內容區塊為零,而其繪製出的邊框佔據空間,這使得版面配置、變換、點擊測試、外框、溢位和對齊,都比具有明確 viewBox 的 SVG 較不直觀。邊框三角形無法直接建立圓角尖端、弧形邊緣、空心形狀、漸層填色、描邊、複雜陰影或任意多邊形。針對這些需求,請使用 SVG 或 clip-path,並在預期環境中測試瀏覽器支援。
| 功能 | 邊框三角形 | SVG / clip-path |
|---|---|---|
| 實心直邊形狀 | 是 | 是 |
| 四個方向(上、下、左、右) | 是 | 是 |
| 圓角尖端或弧形邊緣 | 否 | 是 |
| 漸層填色或描邊 | 否 | 是 |
| 空心或描邊形狀 | 否 | 是 |
| 任意多邊形或對角線 | 否(僅四個方向) | 是 |
| 基於 viewBox 的縮放 | 否 | 是 |
| 純 CSS,無標記檔案 | 是 | 否(SVG)/視情況(clip-path) |
如果設計只需要一個實心裝飾性三角形,邊框方式是可用的最輕量選項。如果設計需要曲線、描邊、漸層或任何超出四個基本方向的形狀,正確的工具應改用 SVG 或 clip-path。
在出貨前測試三角形
單一三角形的效能成本可忽略不計，但數百個裝飾元素仍會增加 DOM 與繪製工作。建議使用一個帶有裝飾形狀的語意化控制項，而非重複的隱藏控制項。請在 200% 縮放、高對比和強制色彩模式下測試最終結果，並涵蓋常見的行動裝置寬度。預覽僅能確認邊框幾何，無法驗證目的地元件的完整無障礙性或版面行為，因此請另外規劃檢查周圍元件的版面、變形、點擊測試、外框、溢位與對齊。
光柵化會因縮放與裝置像素比而有所不同，因此預覽在 100% 顯示的結果，在 200% 或高密度螢幕上可能會有些微差異。在 100% 看起來清晰的像素，到了 3x 的行動裝置螢幕上可能會變得模糊；而在寬螢幕桌面上造成困擾的 1px 不對稱，在小尺寸手機上可能根本看不出來。在認定三角形可以出貨之前，請將結果跑過目的地元件、目的地樣式表與目的地裝置清單。
最後，請確認 class 名稱 lizely-triangle 不會與現有的樣式表發生衝突，若發生衝突，請同時更新 CSS 與 HTML。Class 名稱衝突可能會悄悄覆寫宣告，導致目的地頁面出現非預期的顏色、尺寸或方向。若瀏覽器政策在複製步驟中拒絕剪貼簿存取，兩個程式碼區塊會保留在頁面上供手動選取，工具也不會誤報複製成功。
延伸閱讀：製作圓角或外框 CSS 三角形：產生器的限制。
延伸閱讀：產生 CSS 三角形時應避免的錯誤。