August 4, 2018 at 2:07 pm #275029
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.
Here is are the working exemples:
Anyone knows how to solve that?
Marcelo AllendeAugust 5, 2018 at 4:28 am #275032
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).
I hope it helpsAugust 5, 2018 at 2:49 pm #275038
Hi Pogany, how are you?
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”;
Updated code with the right path:
Marcelo AllendeAugust 6, 2018 at 3:40 am #275055
This is the modified pen:
The SVG path was black and not transparent because I’ve putted it outside the defs tag. Now you have it again in the defs and thus invisible again.
I hope you’ll find it useful.
You must be logged in to reply to this topic.