🔺
css triangle,
CSS 三角形與箭頭產生器
使用傳統邊界技巧快速產生純 CSS 三角形。
自訂方向、尺寸與顏色 — 即時預覽並一鍵複製程式碼。
🔺
8 個方向
上下左右以及 4 個斜角
📋
一鍵複製
直接複製產生的 CSS 語法
⚡
即時預覽
所有調整立即呈現在畫面上
px
px
預覽效果
100px × 80px
產生的程式碼
CSS
about,
關於本工具
「CSS 三角形與箭頭產生器」利用經典的 邊界技巧 (Border trick)，為您產生純 CSS 語法寫成的三角形，完全不需要載入額外的圖片檔或 SVG。支援多達 8 種不同的尖端朝向（上、下、左、右，以及四個角落斜角）。
這項技術非常適合應用在對話框 (Speech bubble) 的尖角、下拉式選單的指示箭頭、導覽列裝飾或是任何介面設計的小巧思。產生的程式碼可以直接複製並貼到您的專案中。所有運算皆在您的瀏覽器端完成，快速且注重隱私。
how to,
使用方法
STEP 1
選擇三角形方向
從左側的九宮格按鈕中，選擇您的三角形尖端想要朝向哪個方位。本工具支援所有的 8 個方位設定。
STEP 2
調整外觀尺寸
利用寬度與高度滑桿來調整三角形的大小。同時利用調色盤選擇您要的顏色，右方的預覽區會即時為您顯示最終效果。
STEP 3
複製程式碼並應用
確認預覽效果滿意後，點擊「複製 CSS」或是「複製 HTML」，即可將完整的語法複製到您的剪貼簿中，並貼上至開發專案中。
glossary,
名詞解釋
- 邊界技巧 (Border Trick)
- 一種透過設定元素的寬高為 0，並且給予相接且粗厚度不同的邊框，再透過透明顏色隱藏不必要部分，進而「擠」出三角形形狀的經典 CSS 手法。
- transparent (透明)
- CSS 的顏色值之一，代表完全透明。在此技巧中，被用來將不需要的邊框隱形，讓使用者只看到帶有顏色的那面邊框 (也就是三角形本身)。
- clip-path
- 一種用來裁切元素的 CSS 屬性。與邊界技巧相比，它能繪製出更複雜的圖形且容易實現響應式，但在極端舊版的瀏覽器中可能會有相容性問題。
- 對話框 (Speech Bubble)
- 類似漫畫對話氣球的 UI 介面，經常運用在聊天室或是提示訊息中。通常主體是一個圓角矩形，旁邊再接一個小三角形當作對話者的指向尾巴。
- 偽元素 (Pseudo-element)
- 如 ::before 或 ::after，它們不是實際存在於 HTML 中的標籤，而是透過 CSS 產生的虛擬元素。開發者經常利用偽元素來繪製三角形，並將其附著在目標容器的邊緣。
faq,
常見問題
- Q.邊界技巧 (Border trick) 跟 clip-path 哪個比較好？
- 邊界技巧的優點是完全相容所有的舊版瀏覽器；而 clip-path 則能支援更複雜的多邊形，但可能在極舊的瀏覽器上無法運作。對於現代專案來說，兩者都可以安心使用。
- Q.可以製作正三角形嗎？
- 您可以藉由調整寬高比例來產生近似的正三角形。以向上的三角形為例，可以嘗試將寬度設定為高度的接近 2 倍作為起始點微調。
- Q.操作資料會被傳送到伺服器嗎？
- 不會。所有的設定與程式碼產生過程都只在您的瀏覽器端執行，不會有任何資料回傳給我們。
- Q.可以製作響應式 (RWD) 的三角形嗎？
- 工具產生的 CSS 預設使用 px 單位，若您需要響應式縮放，請在貼上程式碼後，手動將 px 替換為 em、rem 或 vw 等相對單位即可。
- Q.可以產生完整的對話框 (Speech bubble) 語法嗎？
- 本工具專注於產生「三角形」本身的 CSS。實務上完整的對話框通常是將這個三角形的 CSS 結合 ::before 或是 ::after 偽元素 (Pseudo-element) 定位到主要區塊邊緣來實現。
use cases,
使用場景
💬
聊天對話框尾巴
在聊天介面或推播通知氣泡的邊緣，加上一個小三角形指向發言者。
📂
折疊選單的箭頭指示
使用上下方向的三角形，來代表選單或是手風琴 (Accordion) 區塊的開啟與關閉狀態。
🎨
客製化 Select 箭頭
隱藏瀏覽器原生的下拉選單箭頭，並使用自訂的 CSS 三角形來統一網站風格。
🖼️
輪播圖切換按鈕
在圖片輪播或是內容幻燈片兩側，製作向左與向右的箭頭按鈕，完全不需載入 icon 字體。
Send Feedback
Please let us know your thoughts to help us improve the tool.
Feedback sent successfully. Thank you for your cooperation!
An error occurred. Please try again later.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.