Clip image with CSS clip-path from SVG – Bootstrap4
Clip image with CSS clip-path from SVG – Bootstrap4
html
<svg width="0" height="0">
<defs>
<clipPath id="SVGPath" transform="scale(2)">
<path class="meeny_svg" d="M103.36,51.7l-51.6,51.6L.16,51.7,51.76.11ZM51.76,96.13,96.19,51.7,51.76,7.28,7.34,51.7Z" transform="translate(-0.16 -0.11)"/>
<rect class="meeny_svg" x="48.73" y="16.55" width="5.07" height="69.31" transform="translate(-21.36 51.14) rotate(-45)"/>
<polygon class="meeny_svg" points="27.59 51.75 24.06 51.75 61.76 89.45 65.34 85.86 27.59 48.11 27.59 51.75"/>
<polygon class="meeny_svg" points="39.66 19.12 46.81 19.12 41.44 13.75 37.85 17.33 39.66 19.14 39.66 19.12"/>
<polygon class="meeny_svg" points="48.12 27.6 84.27 63.75 87.86 60.16 55.29 27.6 48.12 27.6"/>
<polygon class="meeny_svg" points="19.14 39.66 17.33 37.85 13.75 41.44 15.58 43.27 19.14 43.27 19.14 39.66"/>
</clipPath>
</defs>
</svg>scss
.section2 {
//clip-path: polygon(0 0, 100% 0%, 100% 85%, 50% 100%, 0 85%);
clip-path: url(#SVGPath);
}