3つの生成方式の違い
clip-pathは要素の表示領域を切り抜き、border-radiusは既存の矩形の角を丸めます。CSS三角形・矢印はborderや疑似要素を使って図形そのものを作ります。同じ「三角形」でも、clip-pathのプリセットとborder方式では目的と出力が異なります。
対応範囲
clip-pathはpolygon()、circle()、ellipse()、inset()に対応します。角丸はpx・%・rem・em、四隅別・楕円構文に対応します。三角形・矢印は1〜500pxの整数を受け付け、半分に割る値は0.5px単位を維持します。
角丸の%は、水平半径ではborder boxの幅、垂直半径ではborder boxの高さが基準です。正方形なら円、長方形なら楕円になります。隣接する角丸が重なる場合は、仕様のf = min(Li / Si)に従ってused valueが縮小されますが、指定CSSを小さい数値へ書き換えることはありません。
仕様と使い分け
CSS Masking、CSS Backgrounds and Borders、CSS Pseudo-Elementsの各仕様に沿った構文を生成します。url()によるSVG clipPath、path()、shape()、rect()、xywh()や画像加工には対応しません。