為何該元素的寬度與高度為零？

可見的形狀完全由邊框繪製而成；兩條透明邊框構成斜面，一條有色邊框則指向所選方向。

為何奇數底邊尺寸仍能保持精確？

生成器使用向上取整與向下取整的邊框寬度，例如 20px 與 21px，因此瀏覽器像素量化無法將請求的 41px 總寬度縮小。

aria-hidden 是否永遠正確？

僅適用於裝飾性三角形。若該形狀傳達意義或作為控制項，應在周圍語意元件中提供可訪問文字或標籤。

生成器是否能產生圓角或邊框三角形？

不行。邊框三角形為實心直邊形狀；若需曲線、線條、漸層或更複雜的幾何，請使用 SVG 或 clip-path。

CSS 三角形生成器

使用方式

1.請選擇三角形的朝向、寬度、高度以及六位數 HEX 顏色。
2.請在預期的尺寸與背景環境下檢視即時結果。
3.複製 CSS 與 HTML，並根據需要保留或替換裝飾性可訪問性處理。

關於CSS 三角形生成器

CSS 三角形產生器會產生一個簡單的實心三角形，不包含 SVG、畫布、圖片檔案或偽元素庫。請選擇上、下、左或右；設定可見寬度與高度；然後選擇六位數的十六進位顏色。頁面會立即更新真實的 CSS 預覽，並同步顯示 CSS 與 HTML。產生與複製全程在當前瀏覽器標籤頁中完成，不會上傳任何內容，也不需要帳號、伺服器渲染或儲存設計狀態。

此技術以一個內容寬度與高度皆為零的元素為起點。透明邊框構成兩條斜邊，而一個有色邊框則指向所選方向。向上三角形使用透明的左、右邊框加上有色的底邊框；向下則使用有色的頂邊框；向左則使用透明的頂、底邊框加上有色的右邊框；向右則使用有色的左邊框。實作會明確寫出每項屬性，以確保幾何結構清晰可見且可審核。

對於垂直三角形，兩條透明側邊框總和等於所選寬度，有色邊框等於所選高度；對於水平三角形，透明的頂、底邊框總和等於所選高度，有色邊框等於所選寬度。偶數尺寸會均等分割，奇數尺寸則使用地板與天花板值，例如 41px 基底會使用 20px 與 21px，因為 Chromium 可將兩個 20.5px 的邊框量化為 20px。單像素的不對稱性可保留請求的總繪製尺寸，避免無聲損失一像素。雖然掃描結果可能因縮放與裝置像素比而略有差異。

寬度與高度接受從十到三百像素的整數值。顏色必須是正確的雜湊值加上六個十六進位數字，並轉為小寫。瀏覽器會限制一般輸入，而生成器會獨立拒絕不支援的方向、錯誤的顏色、小數或超出範圍的值。它不會靜默地限制無效的程式碼輸入，亦不會產生不完整的程式碼。

即時預覽使用與 CSS 輸出相同的匯出邊框宣告。HTML 片段包含一個 div，帶有產生的類別與 aria-hidden="true"。此可訪問性設定適用於作為裝飾性箭頭或分隔線的元素，因為它不傳遞任何資訊。若三角形用來傳達狀態、方向、驗證、導航或其他意義，則不可僅依賴此靜默片段。應為互動控制加入可見文字或可訪問標籤，並確保裝飾性三角形對輔助科技隱藏。

複製 CSS 與複製 HTML 會分別請求剪貼簿權限。若成功，狀態會標示複製的格式。若瀏覽器政策拒絕剪貼簿存取，兩個程式碼塊將持續顯示以便手動選擇，頁面亦不會虛假報告成功。此片段不包含任何指令碼、事件處理函式、內嵌圖片、遠端請求或依賴。若該類別與現有樣式表衝突，請改名為 lizely-triangle，並同步更新兩個輸出。

邊框三角形雖然緊湊，但存在限制。該元素的可測量內容區為零，其繪製的邊框則佔據空間。因此，佈局、轉換、點選測試、外框、溢位與對齊可能不如帶有明確 viewBox 的 SVG 直觀。邊框三角形無法直接產生圓角尖端、曲邊、空心形狀、漸層填充、描邊、複雜陰影或任意多邊形。若需這些功能，請改用 SVG 或 clip-path，並在目標環境中測試瀏覽器支援。

所選的 HEX 顏色會以不透明邊框呈現。此專注工具不會產生 alpha 顏色、CSS 變數、漸層、currentColor、廣色域語法以及主題標記。複製後，若要提升主題一致性，可將字面值替換為可信的設計標記，但必須確認目標語法被支援，且透明側邊框仍維持透明。與文字並列的三角形應在亮色與暗色主題下檢視，以確認其對比度足夠，不可假設。

單個三角形的效能成本極低，但數百個裝飾性元素仍可能增加 DOM 與繪製工作。建議使用一個語意控制搭配裝飾性形狀，而非重複隱藏的控制項。最終結果應在 200 百分比縮放、高對比、強制顏色以及常見行動裝置寬度下測試。預覽僅確認邊框幾何，不保證目標元件的完整可訪問性或佈局行為。

MDN 的 CSS 背景與邊框指南檔案說明邊框屬性的設定與透明顏色行為，而 CSS 背景與邊框規範則定義了本處使用的長手邊框寬度、樣式與顏色。精確的尺寸限制與方向序列化為本產品的本機規則，透過四方向、奇數維度、精確輸出與邊界測試來驗證，並非宣稱為通用三角形標準。

方法與來源

請確認所有尺寸為整數、HEX 顏色為嚴格格式，以地板與天花板的透明邊框分割垂直底邊，使奇數總和保持精確；將完整指向尺寸分配給單一有色邊框，並確保預覽與複製的程式碼同步。

常見問題

為何該元素的寬度與高度為零？: 可見的形狀完全由邊框繪製而成；兩條透明邊框構成斜面，一條有色邊框則指向所選方向。
為何奇數底邊尺寸仍能保持精確？: 生成器使用向上取整與向下取整的邊框寬度，例如 20px 與 21px，因此瀏覽器像素量化無法將請求的 41px 總寬度縮小。
aria-hidden 是否永遠正確？: 僅適用於裝飾性三角形。若該形狀傳達意義或作為控制項，應在周圍語意元件中提供可訪問文字或標籤。
生成器是否能產生圓角或邊框三角形？: 不行。邊框三角形為實心直邊形狀；若需曲線、線條、漸層或更複雜的幾何，請使用 SVG 或 clip-path。

色彩工具使用指南

查看全部

使用方式

關於CSS 三角形生成器

方法與來源

常見問題

相關工具

色彩工具 使用指南

色彩工具使用指南