こんにちは、
次のように、同じ要素で複数のマスクを使用することは可能ですか?
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%);
これにより、互いに分離された要素の特定の領域のみを表示できます。
ありがとうございました。
これは、SVG定義の<clipPath>
でクリップパスを使用する場合に可能です。
.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>
Chrome 60、Windows上のFirefox 55で動作することを確認しました。残念ながらIE/Edgeでは動作しません。