エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSS】ボックス要素をCSSだけでクリッピングできるのか?
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSS】ボックス要素をCSSだけでクリッピングできるのか?
Q 質問:ボックス要素をCSSだけでクリッピングできるのか? A 回答:できます! ……というワケで、スタ... Q 質問:ボックス要素をCSSだけでクリッピングできるのか? A 回答:できます! ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング(切り抜き表示)する方法を紹介します。 使用するのは「clip-path」プロパティ。 実はCSS2でも使えましたが、最新のCSS3ではかなり便利な使い方ができるようになっています。 例:円に切り抜く .box { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); } 例:菱形に切り抜く .box { -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)