エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
画像をSVGで切り抜く clip-path, mask
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
画像をSVGで切り抜く clip-path, mask
前記事「GIMP 初期状態に戻す、パスツールを使う」では、GIMP で葉っぱの SVG ファイルをつくり画像を切... 前記事「GIMP 初期状態に戻す、パスツールを使う」では、GIMP で葉っぱの SVG ファイルをつくり画像を切り抜く過程を記事にしましたが、その際、CSS のプロパティ clip-path がなかなか思うような結果を出してくれず苦労しましたので整理してみました。 clip-pathclipPath 要素の clipPathUnits 属性mask 01clip-path clip-path(mdn) 画像を円で切り抜くのは簡単で、 <img class="c-mask__circle" src="/wp-content/themes/leaf/images/flower.jpg"> img タグに class を指定して、 .c-mask__circle { clip-path: circle(50%); } とすれば簡単に円で切り抜くことができます。 で、これを作成した葉っぱの SVG