PLAY CSS
jaen

エフェクト

clip-path

clip-path は、要素を図形の形に切り抜きます。円・楕円・四角・多角形などの外側は見えなくなります。

構文none | <clip-source> | [ <basic-shape> || <geometry-box> ] …
none | <clip-source> | [ <basic-shape> || <geometry-box> ]

<basic-shape> = inset() | circle() | ellipse() | polygon()
  | path() | rect() | xywh() | shape()

プレビュー

プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  background: linear-gradient(
    135deg,
    #88d1c7,
    #77a7d7,
    #eaac3a
  );
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

コントロール

<basic-shape>polygon()
basic-shape
polygon()

番号の付いた点をドラッグして形を変えられます

点 1
横の位置
縦の位置
点 2
横の位置
縦の位置
点 3
横の位置
縦の位置

解説

基本の図形

  • inset() は、上・右・下・左から内側に入った四角です。round のあとに border-radius と同じ書き方で角の丸みを付けられます。
  • circle() は半径と中心（at のあと）で決まる円です。半径を省略すると closest-side（中心からいちばん近い辺まで）になります。
  • ellipse() は横と縦の半径で決まる楕円です。
  • polygon() は頂点の座標を「横 縦」の組にしてカンマで並べます。% は要素の幅・高さに対する割合です。このページでは、番号の付いた点をドラッグして形を変えられます。

切り抜いても箱の大きさは変わらない

切り取られた部分は見えなくなり、クリックにも反応しなくなりますが、レイアウト上の大きさはそのままです。周りの要素は動きません。プレビューでは、元の箱の位置を点線の枠で示しています。外側に付けた box-shadow や outline も一緒に切り取られます。

気をつけること

  • circle() の半径の % は、幅と高さから求めた対角線の長さを √2 で割った値に対する割合です。このページのコントロールでは長さとキーワードだけを扱います。
  • 図形のあとに margin-box や content-box などを書くと、どの箱を基準に座標を測るかを変えられます。初期値は border-box です。
  • 同じ種類の図形どうしなら transition でなめらかに変化します。polygon() は頂点の数がそろっている必要があります。

参考リンク

MDN Web Docsclip-pathSpecificationCSS Masking Module Level 1Can I useclip-path
PLAY CSS