CSS 箭頭產生器

這個 CSS 箭頭產生器可以用視覺化方式建立多種箭頭樣式,包含使用 clip-path 的實心箭頭,以及使用 pseudo-element 組成的線條箭頭。你可以調整方向、總長度、箭頭大小、箭頭長度、箭身粗細、單色或漸層顏色,以及選用邊框,並即時預覽與複製產生的 CSS。

自訂設定


{{ startColor }}
{{ endColor }}

預覽

{{ arrowWidth }} x {{ arrowHeight }} px

CSS