🔺
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 字體。
發送反饋/請求
發送反饋
請告訴我們您的想法，以幫助我們改進工具。
這不是工具的輸入欄位
反饋發送成功。感謝您的合作！
發生錯誤。請稍後再試。
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.