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

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

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

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

<div>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174390595232013.jpg" 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コードです。クリスには、変換プロセスを説明する素?cái)长圣鹰钎ⅳ辘蓼埂?/p>

<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は、畫像（または使用する場(chǎng)所）と同じ背景色で満たす必要があります。それ以外の場(chǎng)合は機(jī)能しません。

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

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

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

このブラウザは、Caniuseのデータをサポートしています。これには詳細(xì)が含まれています。番號(hào)は、ブラウザがこのバージョン以降でこの機(jī)能をサポートしていることを示しています。

デスクトップ

モバイル/タブレット

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

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

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

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

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

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

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

これは放射狀の背景への影響であるため、本當(dāng)に透明であることがわかります。

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

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

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

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

このような：

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

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

それでおしまい！

以上がCSSマスクを使用して、ギザギザのエッジを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。