CSSマスクを使用して、ギザギザのエッジを作成します

CSSマスクを使用してジャグ付きエッジを作成します

私は最近、プロジェクトのバナー画像の下部にきちんとしたギザギザのエッジを作成する必要がありました。

これは私にしばらく考えさせられ、その過程で何かを学びました！自分のプロジェクトでも使用できるように、自分の方法を書き留めることができると思います。

通常のHTML画像とラッパー要素から始めます。

<div>
  <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174390595232013.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="CSSマスクを使用して、ギザギザのエッジを作成します">
</div>

次に、pseudo-element ::after使用して、その上に重複する背景画像を配置します。

 .jagged-wrapper ::後{
  コンテンツ： "";
  バックグラウンドイメージ：url（ 'data：image/svg xml; utf-8、 <svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg"><polygon points="1,0 1,1 0,1 " style="fill:white;"></polygon></svg> '）;
  バックグラウンドサイズ：30px 30px;
  幅：100％;
  高さ：30px;
  位置：絶対;
  下：0px;
  右：0;
  z-index：2;
}

その背景画像？これは、データURIに変換されたSVGコードです。これは元のSVGコードです。クリスには、変換プロセスを説明する素敵なビデオがあります。

<svg preserveaspectratio="none" viewbox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
  <polygon points="1,0 1,1 0,1 " style="fill: white;"></polygon>
</svg>

「それは終わった！」私は思った。

これはうまくいきますが、私の良さはとても面倒です。このようなCSSでSVGタグを読むことは困難です。また、それらを引用することを忘れないでください（例url('data:image/svg xml'...') ）。もちろん、これを回避するためにSVGをエンコードすることができますが、さらに迷惑です。また、SVGは、画像（または使用する場所）と同じ背景色で満たす必要があります。それ以外の場合は機能しません。

待って、これはマスクの機能ではありませんか？はい！はい、それがマスクのことです。

これにより、新しいアプローチにつながります。このような画像をCSSマスクとして使用して、バナーイメージの「欠落」部分が実際に欠落するようにします。バナーの上部に背景色の三角形を描く代わりに、バナーから完全に覆い、実際の背景を表示します。そうすれば、それはどんな文脈でも機能します！

このマスクは、ほぼすべての場所で非常にサポートされています。少なくともここで説明した単純なアプローチでは。また、プログレッシブエンハンスメントで実装できるものについても話しています。特定のブラウザでマスクがサポートされていない場合、ギザギザの効果は得られません。それは間違いなく世界の終わりではありません。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

CSSマスクの作業方法の1つはmask-imageとしてアルファチャネルを使用して画像を提供することです。基礎となる要素である盲目の要素は、マスクされた画像のアルファチャネルに基づいて、その（半）透明性を決定します。したがって、マスクの画像が透明な背景にある白いティーポットである場合、盲目の要素がティーポットの形にカットされ、ティーポットの外側のすべてが隠されます。

マスクは理解できない概念になる可能性があります。 Sarah Drasnerには、編集とどのように異なるかなど、マスクを詳細に探索する記事があります。マスクは、ここで説明する以上に多くのことを行うことができます。詳細については、仕様、Caniuse、およびMDNをご覧ください。

必要なのは、上記のSVGに似た単一の「ジャグされた」画像で、左上半分に白で満たされ、左下隅が半透明です。そして、理想的には、画像は実際のSVGであってはなりません。

この時点で、「ねえ、SVGをCSSに直接埋め込み、その中のマスクを定義し、CSSをSVGのマスクIDに向けてください！」

良いアイデア！ HTMLを編集できれば、これは確かに可能です。しかし、私の特定のプロジェクトでは、WordPressを使用しているため、余分な部品をHTMLに注入する代わりに、変更を純粋なCSSに制限したいと考えています。それはもっと仕事になるでしょう。これは珍しいとは思わない。このようなデモの変更については、HTMLを編集する必要がないことは便利です。意味的に役に立たないラッピング要素を回避することは、スタイルフックを提供することだけであることにほとんど同意しますが、これはドキュメントにSVGタグ全体を追加することにも当てはまると思います...

CSS線形勾配を使用して、三角形を作成できます。

 .el {
  背景イメージ：線形勾配（
    右下に、
    白、
    白い50％、
    透明50％、
    透明
  ）;
}

これは放射状の背景への影響であるため、本当に透明であることがわかります。

素晴らしい！バナーのmask-imageとして直接使用できますよね？ mask-size （ background-sizeに類似）とmask-repeat （ background-repeatに似ています）を設定する必要がありますか？

残念ながら、いいえ。それほど良くない。

最初の理由は、Firefoxを使用していない限り、上記の例にはまったくマスクがないことがわかります。これは、執筆時点で、BlinkとWebKitがベンダーのプレフィックスを持つマスクのみをサポートするためです。これは、 -webkit-プレフィックスバージョンを使用してすべてのものが必要です。

ベンダーのプレフィックスに加えて、私たちがしていることは概念的に間違っています。 mask-sizeを使用してマスクを画像の底部ストライプに制限すると、画像の残りの部分にはまったくmask-imageがありません。これにより、完全に不明瞭になります。したがって、ジャグドはマスクだけとして使用することはできません。画像と同じサイズの長方形のmask-imageが必要で、下部に1つだけがギザギザがあります。

このような：

これを2つの勾配画像を使用して行います。最初の画像は、上記の同じギザギザの三角形で、 repeat-xに設定され、下部にあり、画像の下端に沿ってのみ繰り返されるようにします。 2番目の画像は別の勾配であり、下部は30pxの透明性（ジャグを乱すことを避けるため）、上部の不透明（デモの黒から白まで）、および要素の全体のサイズを占めています。

そのため、2つの別々のセクションでバナー画像の高さ全体を占める下部に単一の三角形の鋸歯状を備えたこのウェッジブロックがあります。最後に、これらのブロックを水平方向に繰り返すことでmask-imageとして使用できます。

それでおしまい！

以上がCSSマスクを使用して、ギザギザのエッジを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。