CSS ???? ???? ???? ? ????? ????

?? ??? ?????? ?? ???? ? ??? ??? ???? ? ????? ??????.

??? ?? ?? ???? ???? ?? ? ???? ???? ???! ?? ??? ??? ??????? ??? ??? ? ??? ? ??? ?? ? ??? ?????.

???? 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 ITS? ?? ? ?? ???? ?????.

 .jagged-wrapper :: ?? {
  ???: "";
  ?? ??? : URL ( '??? : ???/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- ??? : 2;
}

? ?? ???? ??? URI? ?? ? SVG ?????. ??? ?? SVG ?????. Chris? ?? ????? ???? ?? ???? ??? ????.

<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? ????? Base64? ??? ? ??? ? ??? ????. ?? SVG? ???? ??? ????? ??? ??????.

??, ??? ???? ??? ???? ?! ?, ?????? ????.

??? ??? ?? ???? ?????. ?? ?? ???? CSS ???? ???? ?? ???? "?? ?"??? ??? ?? ???. ?? ??? ???? ???? ??? ?? ???? ??? ?? ?? ??? ??????. ????? ?? ????? ?? ? ? ????!

???? ?? ?? ??? ???? ????. ??? ???? ??? ??? ?? ????. ??? ?? ??? ? ???? ??? ??? ?? ?? ????? ????. ??? ?????? ???? ???? ??? ???? ? ??? ????. ??? ??? ?? ????.

? ????? Caniuse? ???? ???? ??? ??? ???? ????. ? ??? ???? ?? ?? ??? ??? ???? ???? ??? ????? ?? ?????.

????

???/???

CSS ???? ?? ?? ? ??? ?? ??? mask-image ? ???? ????. ???? ?? ? ?? ??? ??? ???? ?? ??? ???? (??) ???? ?????. ??? ??? ???? ??? ??? ?? ? ??? ? ?? ???? ??? ??? ???? ??? ??? ??? ?? ?? ?????.

???? ??? ??? ??? ? ? ????. Sarah Drasner? ??? ?? ??? ???? ???? ?? ???? ??? ??? ????. ???? ??? ??? ???? ??? ?? ? ?? ?? ? ? ????. ??? ??? ??, Caniuse ? MDN? ??????.

??? ????? ?? ?? SVG? ??? ?? "Jagged"?????, ??? ?? ??? ???? ???? ?? ?? ??? ??????. ??? ?????? ???? ?? SVG????? ????. ?? ??? Ugly Data Uri Chaos? ??? ? ?? ?????.

? ???? "??, 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? ???? ?? ? ?? ?? ???? ?? ??? ?? ? ? ????. ?? ?? ???? ??? ? WebKit? ??? ???? ?? ?????? ??? ? ???? ?????. ??? ??? -webkit- ??? ??? ?? ?? ?????? ?? ?????.

?? ?? ??? ??? ????? ?? ????? ?????. mask-size ???? ???? ???? ?? ???? ???? ??? ????? mask-image ?? ???? ??? ???????. ???? ??? ???? ? ?? ??? ? ??? ? ????. ???? ?? ??? ??? ? mask-image ???? ???? ??? ?? ????.

?? ??:

??? ? ?? ????? ???? ?????? ?????. ? ?? ???? ?? ??? ????? repeat-x ? ???? ??? ??? ???? ???? ?? ????? ?? ?????. ? ?? ???? ?? ???????, ?? 30px? ??? (??? ???? ?? ??), ?? ??? (??? ?? ??? ????) ? ??? ?? ??? ???? ? ?? ????????.

??? ??? ?? ??? ?? ?? ?? ?? ??? ?? ??? ????. ?????, ???? ??? ??? ???? mask-image ? ??? ? ????.

?? ??!

? ??? CSS ???? ???? ???? ? ????? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!