CSS 角カットの作り方

clip-path で角を斜めに切る（コーナーカット・隅切り）コードを、実物プレビュー付きでコピーできます。

角を斜めにカットするには clip-path: polygon(...) で切りたい角だけ2点に分けます。calc(100% - 24px) のようにpx指定にすると、要素サイズが変わってもカット量が一定になります。SF・テック系のカードやボタンに人気です。下にコピペ用コードを用意しました。

右上1隅をカット

CARD

CSS

.cut-corner {
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
}

対角2隅をカット（右上＋左下）

CARD

CSS

.cut-corner-2 {
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  -webkit-clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
}

ポイントと注意点

関連

clip-path ジェネレーター →ドラッグで微調整 八角形 →ストップ標識・枠 角丸で切り抜き →角丸トリミング