Martin Nantel Martin Nantel - 1 year ago 129
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

Answer Source

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" />


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download