CSS 三角形生成器
使用純 CSS 的 Border 技巧產生各種方向與大小的三角形。100% 於瀏覽器端執行，即時預覽並快速複製程式碼。
三角形設定
在左側調整參數，右側即可即時預覽三角形樣式與產生程式碼。
調整參數
px
#6C63FF
預覽與代碼
CSS 程式碼
使用純 CSS 的 Border 技巧產生各種方向與大小的三角形。100% 於瀏覽器端執行，即時預覽並快速複製程式碼。
在左側調整參數，右側即可即時預覽三角形樣式與產生程式碼。
利用 CSS `border` 屬性的特性：當元素寬高為 0 時，四個方向的邊框會形成三角形。將目標方向以外的邊框設為透明，即可顯示出單一方向的三角形。
完全相容所有主流瀏覽器，包含 IE 8+。純 CSS border 是最古老且最穩定的三角形實作方式，不需要任何 JavaScript 或 SVG。
調整工具中的「寬度」與「高度」參數，將高度設為寬度的 0.866 倍（例如寬 100px、高 87px）可近似等邊三角形。