clip-path ジェネレーター

頂点と共通/個別の角丸半径から、clip-path: shape() のコードを GUI で作成する。角丸ポリゴンとフリーパス (M/L/C/Q/A) の 2 モードに対応。

角丸半径 (幅基準)12%

吸着グリッド

頂点(●)をドラッグ、または下の表で精密指定できます。塗りつぶし領域が実際にクリップされる形です。

頂点テーブル (相対値 0-1)

小数桁% 表示で編集

#	x	y	角丸(空=共通)
A
B
C
D
E
F

各行は頂点。「角丸」列は空欄で共通半径、数値で個別指定 (幅基準の比率) します。

プレビュー (可変サイズ・比率を変えて確認)

サイズ幅高

背景

実際の shape() + cqw で描画しています。ウィンドウ幅を変えても角丸は真円のまま (半径は幅に比例して拡縮)。

shape() 版コード

<!-- HTML: cqw の基準(幅)を作るため親をコンテナにする -->
<div class="clip-box">
  <div class="clipped-element">
    <a href="#"><img src="photo.jpg" alt=""></a>
  </div>
</div>

<style>
.clip-box {            /* 角丸 cqw の基準。比率は自由に変えてOK */
  width: 100%;
  height: 100%;
  container-type: inline-size;
}
.clipped-element {
  width: 100%;
  height: 100%;
    background: center/cover no-repeat url("photo.jpg");
  clip-path: shape(
    from 12cqw 0%,
    line to calc(50% - 12cqw) 0%,
    arc to 50% 12cqw of 12cqw 12cqw cw small,
    line to 50% calc(50% - 12cqw),
    arc to calc(50% + 12cqw) 50% of 12cqw 12cqw ccw small,
    line to calc(100% - 12cqw) 50%,
    arc to 100% calc(50% + 12cqw) of 12cqw 12cqw cw small,
    line to 100% calc(100% - 12cqw),
    arc to calc(100% - 12cqw) 100% of 12cqw 12cqw cw small,
    line to 12cqw 100%,
    arc to 0% calc(100% - 12cqw) of 12cqw 12cqw cw small,
    line to 0% 12cqw,
    arc to 12cqw 0% of 12cqw 12cqw cw small,
    close
  );
}
.clipped-element a { display:block; width:100%; height:100%; }
.clipped-element img { width:100%; height:100%; object-fit:cover; }
</style>

頂点は %、角丸は幅基準の cqw (縦横同値)。比率が変わっても角丸は真円・一定です。cqw の基準を作るため親要素に container-type: inline-size が必要です (出力に含めています)。