CODEWITHSUNDEEP
csssvg
MaxwellLynn
MaxwellLynn

Reputation: 968

Using SVG create a transparent diagonal cut

I'm currently using clip-path on the image below. I stupidly didn't look at the browser support and found that it does not work in Edge or IE 11.

I'm wondering how or if possible I could create the below effect with just an SVG that will be supported in IE 11 and Edge.

enter image description here

I currently have been playing around with the below code but strugglign to understand how I can put a image over it like the image above. 

    <svg>
      <path d="M0,60 L50,0 L420,0 A56,56 0 20,1 470,60z" fill="red" />
      <a xlink:href="#">
        <text x="410" y="37" font-size="18" font-weight="500" fill="yellow">Test</text>
      </a>
    </svg>

Really looking forward to your ideas.

Upvotes: 1

Views: 528

Answers (1)

Nasir T
Nasir T

Reputation: 2643

Here is a rough idea (sorry for rough code as made it in a hurry) using pseudo elements ::before & ::after along with css3 transform and transition properties to achieve somewhat the result you are looking for. You can check it out and work around it if it helps. I checked it in FF and IE edge and 11 and 10 and it works well overall.

https://codepen.io/Nasir_T/pen/EvEMMG

Hope this helps gives your the idea or a work around the issue.

Upvotes: 2

Related Questions