I already asked a similiar question here: How to create this shape using CSS?. But is this solution creates a element with background.
Now I need to apply this shape to a image:
Example:
important: The image will overlap another element, so it should be transparent out of its bounds. The example above has a grey background.
I guess the solution is use clip-path. That's what I'm trying: http://jsfiddle.net/gf9uj98j/1/
I've found this solution:
.bg {
width: 300px;
height: 300px;
background-color: red;
margin: 10px;
}
#img-test {
clip-path: url(#clipping);
-webkit-clip-path: url(#clipping);
}<div class='bg'>
<img id="img-test" src="https://i.sstatic.net/pjCCj.png">
</div>
<svg>
<defs>
<clipPath id="clipping" clipPathUnits="objectBoundingBox">
<circle cx=".5" cy=".5" r=".4" />
<ellipse cx=".17" cy=".5" rx=".1" ry=".37" />;
<ellipse cx=".83" cy=".5" rx=".1" ry=".37" />;
<ellipse cx=".5" cy=".17" rx=".37" ry=".1" />;
<ellipse cx=".5" cy=".83" rx=".37" ry=".1" />;
</clipPath>
</defs>
</svg>Instead of using CSS, just use SVG:
<image xlink:href='thesoul2.jpg' y="0" x="200" width="35%" height="40%"
clip-path="url(#CP)"/>
from https://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#clipPath
