Using quick css f.e. with custom-classes
Using a hidden clip-path svg for that (on the right)
/*** image element with custom-class: clippy and star ****/
.clippy.star .avia-image-container-inner {
-webkit-clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}/*** because the hidden clip-path svg is on the same page - we can use relative path ****/
.clippy.sprechblasen .avia-image-container-inner {
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}here is the svg to use as clip-path
<svg class="svg">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0.417,0 v0 c0.23,0,0.417,0.17,0.417,0.379 s-0.187,0.379,-0.417,0.379 c-0.022,0,-0.044,-0.002,-0.065,-0.005 c-0.089,0.1,-0.193,0.118,-0.296,0.121 v-0.025 c0.056,-0.031,0.101,-0.086,0.101,-0.15 c0,-0.009,-0.001,-0.018,-0.002,-0.026 c-0.094,-0.07,-0.154,-0.176,-0.154,-0.295 c0,-0.209,0.187,-0.379,0.417,-0.379 M0.865,0.85 c0,0.055,0.032,0.102,0.08,0.129 v0.021 c-0.09,-0.002,-0.172,-0.018,-0.249,-0.104 c-0.018,0.003,-0.037,0.004,-0.056,0.004 c-0.083,0,-0.159,-0.025,-0.22,-0.067 c0.126,0,0.244,-0.046,0.334,-0.128 c0.045,-0.041,0.081,-0.09,0.106,-0.144 c0.027,-0.057,0.04,-0.119,0.04,-0.182 c0,-0.01,0,-0.02,-0.001,-0.03 c0.063,0.059,0.102,0.138,0.102,0.226 c0,0.102,-0.052,0.193,-0.134,0.253 c-0.001,0.007,-0.002,0.015,-0.002,0.022"></path></clipPath>
</svg>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.