CSSでvideoタグを切り抜いて好きな形に表示する

  • このエントリーをはてなブックマークに追加

今日はvideoタグを好きな形に切り抜きしてみましょう。
実際に表示するとこんな感じです。

<円形に切り抜いた場合>


どうやって切り落とす?

これが実は、CSSの「clip-path」という1行を追加するだけで切り落としが可能です。

<CSS>


circleは円形です。
他にも、楕円形・五角形など、色々な形にすることができます。とても簡単ですね。

ジェネレーター

手打ちで数値を調整してもいいのですが、ジェネレーターを使ってしまった方が簡単です。


Clippy: https://bennettfeely.com/clippy/

ブラウザ上で点を動かすだけで、お好みの形・サイズに調整して、数値を自分のCSSに張り付けるだけです。
直感的に作業できるのでおすすめです。

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。