CSS 三角形產生器

使用 border 屬性產生 CSS 三角形。支援全部 8 個方向，可自訂大小和顏色。

方向

寬度: 100px

10px200px

高度: 100px

10px200px

顏色

預覽

CSS 代碼

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #3B82F6;

分享此工具

📖

使用方法

Step 1

選擇方向

選擇方向

選擇三角形方向

→

Step 2

調整大小

調整大小

調整大小和顏色

→

Step 3

複製

複製 CSS 代碼使用

✨

功能特色

8 個方向

包含對角線的 8 個方向三角形

自訂大小

獨立指定寬度和高度

即時預覽

變更即時反映在預覽中

❓

FAQ

使用 CSS border 寬度繪製三角形形狀。

🔗相關工具

色碼換算工具

在 HEX、RGB 和 HSL 色碼之間互換。使用顏色選擇器和即時預覽直觀選色。

色彩選擇器

使用色輪和滑桿直覺地選取顏色。取得並複製 HEX、RGB 和 HSL 格式的色彩代碼。

圖片色彩擷取器

自動偵測圖片中的主要色彩並生成色彩調色盤。也可以點擊圖片上的任意位置來取得個別色彩。

圖片平均色彩擷取器

計算整張圖片或選定區域的平均色彩。適合用於選擇配色方案或縮圖背景顏色。

CSS 漸層產生器

使用拖動控制視覺化建立 CSS 漸層。支援線性、放射狀和圓錐漸層類型及預設。

CSS 陰影產生器

使用滑桿視覺化建立 CSS box-shadow。支援多重陰影和內陰影。