Hey guys, I’m new here on the forum, and I’ve been breaking my head trying to solve this issue.
I have a 3 triangle menu, which are square images. I’m trying to delimit the area of the hover effect, but it seems impossible.
Tried with SVG and clip-path but both doesn’t work. I’m wondering if this is really possible or not.
I’ve chosen to work with your second pen because it is the only one where I can see something.
I’ve putted the polygon outside the defs because I wanted to see the polygon.
The clipPath was not closed.
Also I’ve deleted some of your CSS because you apply the clipPath to the SVG and I understand that you need to cut the image. (I may be wrong).
First of all, thanks for taking the time to help me.
I spent more than 3 days trying to figure it out and thought it was not possible.
So we need to use JS to achieve this effect.
But what about inserting a link now? And why now the background of the SVG path is black and not transparent?
It is meant to be a menu of 3 triangles side by side, that directs to different portfolio sections.
I tried to duplicate the images to see if they appear side by side, but nothing happened.
I found this but I totally don’t know how to insert on JS.
var a = document.createElement(‘a’);
var linkText = document.createTextNode(“my title text”);
a.title = “my title text”;
a.href = “http://example.com”;