clip-pathとは

元の画像

clip-path: inset( );

clip-path: circle( );

clip-path: polygon( );

clip-path: polygon( );

clip-path: path( );

ブログ記事に戻る

画像以外の要素をクリッピング

iframe要素をクリッピング

videoタグをクリッピング

ブログ記事に戻る

clip-path を使用したアニメーション

ボタンのhoverに使用

hover時のアニメーション01
hover時のアニメーション02
hover時のアニメーション03

hoverやinviewと組み合わせて、
スライドするように表示できます

ブログ記事に戻る