【CSS】clip-pathをいろいろ試してみた(No.1)

初めに

cssのclip-pathを使うと画像を切り取ることが出来ますので、関連記事を参考に理解した内容を纏めてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

clip-pathとは

cssで要素にcliping領域を作って、表示したい部分（切り取りたいところ）を指定することが出来るプロパティ。
clipプロパティのupgradeバージョン。

clipとの違い

clipは適用する要素の位置がposition:absoluteまたはposition:fixedでなければなりません。また、切り抜きができる形は四角のみになります。MDNの公式ドキュメントには可能であればclip-pathを使うようにとされています。

• clipの構文

clip: rect(上から離れた距離, 右へ, 下へ, 左から離れた距離);

①html

<section class="clip_section">
    <div class="clip_path_main">
       <img id="clip" style="width:100px;" src="image.jpg">
    </div>
  </section>

②css

# clip {
  position: absolute;
  top: 100px;
  left: 200px;
  height: 100px;
  clip: rect(50px, 90px, 90px, 40px);
}

③結果

青い四角の領域で上から50px,左から50px離れたところを起点にして、左から右へ向けて90pxまで、上から下に向けて90pxまで表示されています。ちょっと使いづらいイメージでした。

clip-path

clipのupgradeバージョン。こちらはpositionの指定も必要なく、円形、楕円形、多角形まで様々な形をcliping出来ます。基本的によく使われるものをclip-pathを使って表示してみました。

inset

四角い形で要素を切り抜くことが出来ます。構文はmarginやpaddingの指定の仕方と同じです。

clip-path: inset(上下 左右);
clip-path: inset(上 下 左 右);

①html

  <section class="clip_path_section">
    <div class="clip_path_main">
      <img id="clip_inset" style="width:100px;" src="image.jpg">
    </div>
  </section>

②css

# clip_inset {
  clip-path: inset(10px 20px 5px 8px);
}

③結果

circle

円形で要素を切り抜きます。やり方は半径を指定し、円の中心点を左からx,上からyで指定します。

clip-path: circle(半径 at X座標 Y座標);

①html

  <section class="clip_path_section">
    <div class="clip_path_main">
      <img id="clip_circle" style="width:100px;" src="image.jpg">
    </div>
  </section>

②css

# clip_circle {
  clip-path: circle(30% at 50% 50%);
}

③結果

polygon

多角形で要素を切り抜きます。左からx座標と上からy座標を指定して多角形の角を決めます。例えば、３角形の場合それぞれのx,y座標の角を３セット用意します。

clip-path: polygon(第一X 第一Y, 第二X 第二Y, ...)

①html

  <section class="clip_path_section">
    <div class="clip_path_main">
      <img id="clip_polygon" style="width:100px;" src="image.jpg">
    </div>
  </section>

②css

# clip_polygon {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

③結果

clip-pathジェネレーター

clip-pathを生成するにはcssで実際にコードを書く方法以外に、作りたい形のclipを目で確かめながらコードを生成してくれるclip-pathジェネレーターがあります。作りたい形を選んでマウスでノードを動かすだけなのでとても簡単です。

https://bennettfeely.com/clippy/
https://www.uplabs.com/posts/clip-path-generator

参考記事・サイト

https://developer.mozilla.org/ja/docs/Web/CSS/clip
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-clip-path.html
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path
https://www.webdesignleaves.com/pr/css/css_clip_path.html