今日はvideoタグを好きな形に切り抜きしてみましょう。
実際に表示するとこんな感じです。
＜円形に切り抜いた場合＞
どうやって切り落とす？
これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。＜CSS＞
|
1 2 3 |
video{ clip-path:circle(40% at 50% 50%); } |
circleは円形です。
他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。
ジェネレーター
手打ちで数値を調整してもいいのですが、ジェネレーターを使ってしまった方が簡単です。
Clippy: https://bennettfeely.com/clippy/
ブラウザ上で点を動かすだけで、お好みの形・サイズに調整して、数値を自分のCSSに張り付けるだけです。
直感的に作業できるのでおすすめです。
YoutubeChannelのご紹介
同様の内容を、動画でご覧になれます。
https://youtu.be/ndlOfvi7VsM
