【CSS】clip-pathプロパティについて

どうも、くまだです。

CSSのclip-pathについてのあれこれ。

clip-pathについて

clip-pathプロパティは、多角形を作ることができます。要素や画像をクリッピングして表示させることができます。clip-pathでは以下の指定をするとさまざまな形にクリッピングすることができます。

• inset()：四角形
• circle()：円形
• ellipse()：楕円
• polygon()：多角形

inset()：四角形

inset()は四角形にクリッピングします。もともとは300px x 300pxの四角形でしたが、inset()によって上から100px、右から50px、下から100px、左から100pxのエリアの四角形にクリッピングされます。

.box {
    width: 300px;
    height: 300px;
    background-color: orange;
    clip-path: inset(100px 50px 100px 50px);
}

角を丸めたい場合は以下のようにroundを指定します。

 clip-path: inset(100px 50px 100px 50px round 10px 20px 0 0);

circle()：円形

circle()は円形にクリッピングします。もともとは300px x 300pxの四角形でしたが、circle()によって上から50%、左から50%を中心座標とする半径100pxの円形にクリッピングされます。

.box {
    width: 300px;
    height: 300px;
    background-color: orange;
    clip-path: circle(100px at 50% 50%);
}

ellipse()：楕円

ellipse()は楕円にクリッピングします。もともとは300px x 300pxの四角形でしたが、ellipse()によってセンター位置にx軸半径150px、y軸半径50pxの楕円形にクリッピングされます。

.box {
    width: 300px;
    height: 300px;
    background-color: orange;
    clip-path: ellipse(150px 50px at center);
}

以下のように指定すれば、border-radiusで表現できないような曲線も作れます。

clip-path: ellipse(81% 135% at 81% 93%);

polygon()：多角形

polygon()は多角形にクリッピングします。もともとは300px x 300pxの四角形でしたが、polygon()によって、x座標50px、y座標0px、x座標0px、y座標100px、x座標100px、y座標100pxの座標を結んだ領域にクリッピングされます。

.box {
    width: 300px;
    height: 300px;
    background-color: orange;
    clip-path: polygon(50px 0px, 0px 100px, 100px 100px);
}

ここまで読んでくださりありがとうございました。