Martin Nantel Martin Nantel - 4 months ago 23
Sass (Sass) Question

Custom CSS shape with borders and background image

Hi guys im trying to do this in css/sass only! The border have to change on rollover and the background could be an image! I tried SVG and clipPath, transform3d without any success!Example here

enter image description here


There is the workaround that we found. It will need some adjustement but look good for our need!

<a href="">
        <svg class="stroke-path" height="100%" width="100%">
                <pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
                    <image xlink:href="" x="0" y="0" width="100%" height="100%" />
            <path id="mlp2" d="M206.5,173.1L33.3,162.5c-6.3,0-11.4-5.1-11.3-11.4c0,0,0,0,0,0L10.5,39.8c0-6.3,5.1-11.4,11.3-11.4 c0,0,0,0,0,0l208.2-17.9c6.3,0,11.4,5.1,11.3,11.4c0,0,0,0,0,0l-23.6,139.8C217.8,168,212.8,173.1,206.5,173.1 C206.5,173.1,206.5,173.1,206.5,173.1z" fill="url(#img1)" fill-opacity="1" />
        <svg class="" height="100%" width="100%">
                <filter id="f1" x="0" y="0" width="200%" height="200%">
                    <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
                    <feGaussianBlur result="blurOut" in="offOut" stdDeviation="8" />