nlog

とめどなく流れるよだれ

clip-path で画像を切り抜く

css

f:id:namikuguri:20180127235709p:plain

clip-path を使うと、ひし形など様々な画像の切り抜きをすることができる。

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

clip-path の値に geometry-box を指定することで切り抜きの範囲を指定することができるが、まだ一部のブラウザでしかこれはサポートされていない。

.clip {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) margin-box; /* margin-box の部分が geometry-box の指定*/
}

また、コリスさんで紹介されている Clippy を使うことで、ユニークな画像の切り抜きが楽しめる。

他の記事で紹介されてることをほぼそのまま書いたな... 。もう一歩踏み込めなかった。

参考