【CSS】shape()関数で複雑な形のクリップ作る

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSのshape()関数のメモ。矢印型のバナーとか、斜めにカットされたセクションとか作れます。

shape()関数の基本

shape()はこんな構文です。

.arrow {
  clip-path: shape(from X Y, コマンド to X Y, ...);
}

fromで始点を指定して、あとはline to・hline to・vline to・curve toなどでパスを描いていきます。

例えば以下のように書けます。

.arrow {
  clip-path: shape(
    from 0 0,
    hline to 100%,
    line to calc(100% + 30px) 50%,
    line to 100% 100%,
    hline to 0,
    close
  );
}
意味
from X Y始点を指定
line to X Y直線
hline to X水平線
vline to Y垂直線
curve to X Y with ...曲線（ベジェ）
close始点に戻って閉じる

参考例としては、こんな形作れます。

    <div class="container">
      <div class="arrow"></div>
      <div class="balloon"></div>
      <div class="cat"></div>
    </div>
.container {
    padding: 80px;
    display: grid;
    row-gap: 20px;

}

.arrow {
    clip-path: shape(from 0 0,
            hline to 80%,
            line to 100% 50%,
            line to 80% 100%,
            hline to 0,
            close);

            width: 200px;
            height: 60px;
            background: red;
}

.balloon {
    clip-path: shape(from 0 0,
            hline to 100%,
            vline to 75%,
            line to 60% 75%,
            line to 50% 100%,
            line to 40% 75%,
            hline to 0,
            close);
    width: 200px;
    height: 60px;
    background: green;
}

.cat {
    clip-path: shape(from 0 0,
            hline to 100%,
            line to 100% 70%,
            line to 0 100%,
            close);
    width: 200px;
    height: 60px;
    background: blue;
}

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

CSS

この記事を書いた人

くまだ

記事一覧