k8o

← Playgrounds一覧に戻る
CSSデモ1

shape()

CSSの単位や関数をフル活用したレスポンシブな図形を定義する関数です。

path()とshape()の比較

スライダーで幅を変えると、固定px指定のpath()は三角形が崩れ、%指定のshape()は形を保つことを確認できます。

path()

固定のピクセル値のため、幅を変えると三角形が崩れる

shape()

パーセンテージのため、幅を変えても三角形を維持する