web-dev-qa-db-fra.com

Est-il possible d'avoir plusieurs masques avec chemin de clip?

Salut,

Je me demande s'il est possible d'utiliser plus d'un masque sur le même élément, comme ceci:

clip-path:polygon(8% 0%, 8% 7%, 14% 12%), polygon(96.4%, 92% 96.4%, 97% 92.3%), polygon(97% 15%, 99% 13%, 99% 0%);

Avec cela, je ne pourrais montrer que certaines zones de l'élément qui sont séparées les unes des autres.

Je vous remercie.

cssmaskclip-path
16
Cain Nuke

Ceci est possible si vous utilisez un chemin de clip avec un <clipPath> Défini par SVG

.clip-svg {
  clip-path: url(#myClip);
}
<img class="clip-svg" src="https://picsum.photos/id/1015/600/400">

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <polygon points="400,50 400,320, 140,300"/>
      <polygon points="450,10 500,200 600,100" />
      <polygon points="150,10 100,200 300,100" />
    </clipPath>
  </defs>
</svg>

Fonctionnement confirmé dans Chrome 60, Firefox 55 sur Windows. Malheureusement, ne fonctionne pas dans IE/Edge.

16
Zac