clip-pathを使ってみる

ひとりCSS Advent Calendar 2022 21日目です。

clip-path を使ってみます。

clip-path とは

シェイプが作れる。

よく使う三角

<div class="info-box">目立たせたいボックス</div>

.info-box {
  background: #fff;
  padding: 2em;
  position: relative;
}

.info-box::after {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  content: "";
  width: 32px;
  height: 32px;
  background: var(--color1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}

See the Pen object-fit by Beco (@becolomochi) on CodePen.

border-left border-top で実装していたやつも簡単に書き換えられる。良い

窓みたいなかたち

.img-box {
  width: 150px;
  height: 180px;
  background: url(https://0.gravatar.com/avatar/3c635ac67557f954b04d37a24254f436?size=360) no-repeat;
  background-size: cover;
  background-position: center;
  clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
}

See the Pen clip-path by Beco (@becolomochi) on CodePen.

パス指定さえすれば自在に作れるの楽しい。

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/clip-path