一個帶邊框的 CSS 三角形產生器,會用三條邊框宣告,從一個零尺寸的元素中建構出一個實心三角形——兩條透明邊框負責繪製斜邊,一條上色的邊框則指向所選的方向。寬度與高度接受 10 到 300 像素之間的整數值,顏色必須是井字號加上恰好六位小寫十六進位數字,而方向則限定為上、下、左,或右。這個元素的內容框被壓縮到零,因此可見的形狀完全來自繪製出來的邊框,這也是為什麼同一個技巧,能從一個小型的行內箭頭,縮放到一個大型的主視覺分隔線,而不必改變標記結構。輸出結果是可以分別複製的同步 CSS 與 HTML,你調整任何輸入時,預覽畫面都會重新算繪,而且每一個長格式邊框屬性,都明確寫出來,好讓幾何結構在你把程式碼貼進樣式表之後,仍然可以稽核。
3 邊框三角形的做法說明
邊框三角形這項技巧,有時被稱為零尺寸技巧,因為底層元素在 CSS 中的 width: 0 與 height: 0。因為沒有內容框,繪製出來的邊框會在一個點上會合,形成一個三角形。這些邊框中的兩條被設為透明,因此只有它們繪製出來的厚度,會影響到可見的輪廓,而第三條邊框,則使用所要求的十六進位顏色,讓三角形指向一個可預期的方向。
這種做法之所以吸引人,是因為它不需要 SVG、不需要 canvas、不需要點陣圖檔案,也不需要虛擬元素函式庫——單一一個 div,搭配五、六條長格式邊框宣告,就能完成工作。因為可見的形狀,只是三個在中心會合的繪製矩形,這項技巧在現代瀏覽器中呈現得相當一致。它也讓標記保持輕量:一個元素、一個 class,再加上一段可以複製貼上的程式碼片段。
對於上色的那一側,所選的十六進位色值,會以不透明的邊框繪製出來。這個聚焦的產生器不會產生 alpha 通道、CSS 變數、漸層、currentColor、廣色域語法,或主題權杖(token)。如果你需要可套用主題的顏色,複製之後把字面值換成一個設計權杖,但要確認你的目標環境支援該權杖語法,並讓另外兩側維持透明。
方向對應邊框的關係
每一個方向,都會告訴產生器哪一條邊框是上色的指向邊,哪兩條要保持透明。下表整理了四個支援的方向,如何對應到長格式的邊框宣告。
| 方向 | 上色邊框 | 透明邊框 | 方向性 |
|---|---|---|---|
| 上 | border-bottom | border-left、border-right | 垂直——指向上方 |
| 下 | border-top | border-left、border-right | 垂直——指向下方 |
| 左 | border-right | border-top、border-bottom | 水平——指向左方 |
| 右 | border-left | border-top、border-bottom | 水平——指向右方 |
對於垂直三角形(上、下),兩條透明的側邊邊框加總起來,等於所選的寬度,而上色的邊框則等於所選的高度。對於水平三角形(左、右),透明的上下邊框加總起來,等於所選的高度,而上色的邊框則等於所選的寬度。偶數尺寸會乾淨地平分在兩側;奇數總和,則用向下取整與向上取整,好讓繪製出來的底邊保持精確。
產生一個帶邊框的 CSS 三角形
產生一個可直接上正式環境使用的邊框三角形,工作流程很短,因為CSS Triangle Generator會替你處理幾何運算、驗證,以及同步輸出。
- 從可用選項中,選擇方向——上、下、左,或右。每個方向,都會把上色的邊框釘在一個特定的邊上,並讓另外兩條保持透明。
- 輸入 10 到 300 像素之間的整數寬度與高度值。小數,以及超出這個範圍的值,會被頁面拒絕,而不是被靜默夾限。
- 輸入一個以井字號開頭的六位十六進位顏色,例如 #ff8800。瀏覽器控制項,會把一般輸入限制在這個格式內,而這個純粹的產生器,也會獨立拒絕格式錯誤的顏色,不對錯誤輸入產生任何不完整的程式碼。
- 以三角形實際會使用到的大概尺寸與背景,檢視即時預覽。這個預覽,使用的正是 CSS 輸出中顯示的同一組推導出來的邊框宣告,因此你看到的,就是最終匯出的內容。
- 點擊 Copy CSS 複製同步的樣式,再點擊 Copy HTML 複製對應的程式碼片段。這兩次剪貼簿請求是各自獨立的,而每一次成功的複製,都會標明放進剪貼簿的是哪一種格式。
- 如果瀏覽器政策拒絕剪貼簿存取,兩個程式碼區塊仍然保持可見,可供手動選取——這個頁面不會謊報一次成功的複製。
- 把 CSS 貼進你的樣式表,把 HTML 貼到三角形應該出現的位置。如果 .lizely-triangle 這個 class 會與既有規則衝突,就重新命名它,並同時更新兩份輸出,好讓這個 class 仍然對得上。
- 判斷這個三角形純粹是裝飾用途——在這種情況下保留 aria-hidden="true"——還是帶有意義,在這種情況下,要在周圍的語意元素上,加上可見文字或一個無障礙標籤。
奇數尺寸與瀏覽器像素量化
邊框三角形核心的運算,在偶數情況下很簡單:一個 100 像素寬的底邊,會變成左側透明邊框 50 px,右側透明邊框 50 px。然而,當要求的總和是奇數時,Chromium 可能會把兩條 20.5 px 的邊框,向下量化成各 20 px,靜默地讓繪製出來的底邊縮小一像素。
為了防止這種情況,這個產生器會用向下取整與向上取整,來拆分奇數總和。這個運算很直接:對於一個 41 px 的底邊,floor(41 / 2) = 20,ceiling(41 / 2) = 21。CSS 接著會設定 border-left: 20 px solid transparent,以及 border-right: 21 px solid transparent,得到 20 + 21 = 41——正是你要求的精確繪製尺寸。這一個像素的不對稱,保留了要求的總和,而不是靜默地把一個像素弄丟給瀏覽器的四捨五入。
光柵化仍然可能隨瀏覽器縮放等級與裝置像素比而有所不同,因此這個預覽確認的是邊框的幾何結構,而不是保證在每一個縮放層級下都呈現像素級完美。在上線之前,請在目的地版面中,用常見的視窗寬度測試最終的形狀。
邊框三角形做不到的事
邊框三角形很精簡,但有硬性限制。這個元素可量測的內容框是零,而它繪製出來的邊框卻占用空間,這讓版面配置、變形、命中測試、外框、溢位處理,以及對齊,都比一個帶有明確 viewBox 的 SVG 來得不直覺。一個邊框三角形,無法直接產生一個圓角的尖端、一條曲線邊、一個中空的形狀、一個漸層填色、一條描邊,一個複雜的陰影,或一個任意多邊形。繪製出來的邊框,也是不透明的顏色,因此 alpha 透明度,必須透過改變目的地的背景,而不是三角形本身來達成。
對於曲線、漸層、中空中心、投影,或任意多邊形幾何,請改用 SVG 或 clip-path,並確認你目標環境的瀏覽器支援情況。MDN's CSS backgrounds and borders guide記載了這個產生器所依賴的長格式邊框屬性,以及透明顏色的行為,而W3C CSS Backgrounds and Borders Level 3 specification則定義了底層 border-width、border-style,與 border-color 的行為。
想更深入了解底層技巧,CSS Create Triangle With Border guide更詳細地介紹了同一個零尺寸技巧。
無障礙、主題化,與真實版面測試
這個產生器匯出的 HTML 程式碼片段,會用一個帶有 aria-hidden="true" 的單一 div,把上色的邊框包起來,因為一個純粹裝飾用的箭頭或分隔線,不帶有任何資訊。如果這個三角形傳達的是狀態、方向、驗證結果、導航,或其他意義,請不要只依賴這段靜默的程式碼片段——在周圍的互動控制項上,加上可見文字或一個無障礙標籤,並讓這個裝飾性形狀對輔助技術保持隱藏。
在主題化方面,所選的十六進位顏色,是以不透明邊框繪製出來的,因此深色模式的對比度不會自動處理。請針對淺色與深色背景,都測試這個三角形,而不要假設對比度足夠,並在這個形狀緊鄰文字時,使用一個專門的color contrast checker。單一個邊框三角形的效能成本可以忽略不計,但數百個裝飾性元素,仍然可能增加 DOM 與繪製的工作量——比起重複的隱藏控制項,更建議用一個語意控制項搭配一個裝飾性形狀。
最後,請在 200% 縮放、啟用高對比與強制色彩模式,以及常見的行動裝置寬度下,測試最終結果。這個預覽確認的是邊框的幾何結構,而不是目的地元件完整的無障礙或版面行為,因此端對端測試,仍然屬於三角形實際所在頁面的工作範圍。