CSS ::after 三角形是一種實心形狀,由零尺寸元素上的透明和彩色邊框繪製而成,而 CSS 三角形產生器會輸出精確的完整 border 宣告、尺寸,以及用於上、下、左、右三角形的 HTML。這項技巧之所以有效,是因為兩個透明邊框會形成斜邊、第三個邊框指向所選方向,並且元素的內容寬度和高度都為零。產生器會同步 CSS 與 HTML,因此您看到的預覽會與您複製的程式碼一致,而且輸入驗證非常嚴格:整數尺寸範圍 10 到 300 像素,以及六位數的 HEX 顏色。如果搜尋意圖是尋找一個不產生 SVG、不使用 canvas、不產生影像檔案、也不依賴擬元素套件的 CSS after 三角形產生器,這就是該工作的最佳工具。所有運作都在當前的瀏覽器分頁中完成,不需要上傳、不需要帳號、不需要伺服器算圖,而且程式碼片段不含任何指令碼、事件處理常式或遠端請求。
CSS 三角形產生器產出什麼
CSS 三角形產生器利用 border-color 與零內容尺寸來建立一個簡單的實心三角形,而頁面上除了兩段同步的程式碼區塊外,還提供即時預覽。選擇上、下、左、右作為方向;設定可見的寬度和高度;並挑選一個六位數的 HEX 顏色。輸出會以完整 border 宣告的形式撰寫,以便幾何關係保持清晰且可審核,而非摺疊成單一 border 簡寫。HTML 片段中包含一個帶有產生器類別以及 aria-hidden true 的 div,這對於不傳達資訊的裝飾性箭頭或分隔符號是適當的。如果該形狀用於傳達狀態、方向、驗證結果或導覽用途,請勿僅依賴這個無聲的片段;請為周圍的互動控制項加入可見文字或可存取標籤,並將裝飾性三角形隱藏於輔助科技。
如何產生並複製三角形
開啟產生器,調整四個輸入項,並決定該形狀要如何整合到目標元件中。
- 使用頁面上的控制項,選擇三角形方向、寬度、高度,以及六位數的 HEX 顏色。
- 在實際將使用的近似尺寸與背景上檢視即時結果,以便預覽與目標位置的顏色和間距相符。
- 複製 CSS 與 HTML,然後依據周圍元件的需求保留或替換裝飾性的無障礙處理方式。
邊框方向規則與幾何關係
對於垂直三角形(上或下),兩個透明側邊框的總和等於所選的寬度,而彩色邊框等於所選的高度。對於水平三角形(左或右),透明的上邊框與下邊框的總和等於所選的高度,而彩色邊框等於所選的寬度。偶數尺寸會將垂直底邊平均分配給兩個透明邊框;奇數尺寸則會使用向下與向上取整的值,例如 41px 的底邊會使用 20px 和 21px,這是因為 Chromium 可能將兩個 20.5px 的邊框量化為各 20px,因此保留一像素的不對稱以維持所要求的繪製總量。光柵化的結果仍可能因縮放和裝置像素比而有所不同,請在目標視口中核對最終尺寸。
| 方向 | 彩色邊框 | 透明邊框 | 幾何角色 |
|---|---|---|---|
| 上 | bottom | left, right | 垂直,彩色邊框等於所選高度 |
| 下 | top | left, right | 垂直,彩色邊框等於所選高度 |
| 左 | right | top, bottom | 水平,彩色邊框等於所選寬度 |
| 右 | left | top, bottom | 水平,彩色邊框等於所選寬度 |
將產生的 CSS 套用於 ::after 擬元素
產生的 CSS 描述的是帶有完整 border 宣告的單一 div,但相同的規則可以直接移至任何容器的 ::after 擬元素上。從 CSS 三角形產生器取得輸出,將 border 宣告複製到樣式表中的 .parent::after { ... } 規則內,該形狀就會繼承容器的定位堆疊。如果三角形需要錨定在父元素上,請在父元素設定 position: relative;若要在 ::after 上對齊尖端,則設定 position: absolute 以及任何位移值。由於元素的內容框為零,實際佔位範圍是由繪製的邊框決定,因此在版面配置、變形、點擊測試和輪廓等方面的行為可能不如具備明確 viewBox 的 SVG 直觀。若 lizely-triangle 這個類別會與現有樣式表衝突,請將其重新命名,並同步更新 CSS 與 HTML 輸出。
邊框三角形相對於 SVG 與 clip-path 的限制
邊框三角形雖然精簡,但形狀有其限制。由於繪製區域是直線邊框邊緣的交集,因此它無法直接產生圓角尖端、弧形邊緣、空心形狀、漸層填色、描邊、複雜陰影或任意多邊形。若有上述需求,請使用 SVG 或 clip-path,並在目標環境中測試瀏覽器支援情況。所選的 HEX 顏色會以不透明邊框的形式繪製,因此這個專注的產生器並不會產生 alpha 透明度顏色、CSS 變數、漸層、currentColor 以及廣色域語法。複製之後,將該字面值替換為可信的設計權杖可以改善主題設定,但請確認目標語法有受到支援,並且透明的側邊框仍維持透明。單一三角形的效能成本可以忽略不計,但數百個裝飾性元素仍可能增加 DOM 和繪製負擔,因此與其複製多個隱藏控制項,不如採用一個語意化的控制項搭配裝飾性形狀。
無障礙、對比與主題設定
HTML 片段中含有 aria-hidden true,這是因為純粹作為視覺用途的裝飾性箭頭或分隔符號本身並不傳達資訊,這個無障礙選擇對於純視覺形狀來說是合適的。如果該三角形用於傳達狀態、方向、驗證結果、導覽或其他意義,請勿僅依賴這個無聲的片段;請為周圍的互動控制項加入可見文字或可存取標籤,並將裝飾性三角形隱藏於輔助科技。對於結合三角形與核取方塊或切換開關的表單控制項,請遵循 這份正確製作 CSS 核取方塊的指南中的模式。三角形若緊鄰文字使用,應在淺色與深色主題中分別檢查,而非預設其繼承了足夠的對比,因為所繪製的邊框是完全不透明的。請在 200% 縮放、高對比模式、強制啟用色彩模式,以及常見的行動裝置寬度下測試最終結果。MDN CSS 背景與邊框指南說明了產生器所依賴的 border 屬性與透明顏色行為,而 W3C CSS 背景與邊框規格則定義了此處所使用的完整 border 寬度、樣式與顏色。