Hi!
I’m creating an hexagonal grid and though i’ve managed to make it work in Chrome and Safari, seems that there is still no support for this in Firefox or Edge, at least not with the method I’m using.
Would anyone know a solution or an alternative method for this?
I read about using svg’s but I’ll need help figuring out the code to make this work. I have custom code on the page, so please make sure to check that as well
your clip-path approach is correct, but you need to use svg clip-path for full browser support.
Don’t use the CSS properties of clip path, instead do this:
.hexagon {
-webkit-clip-path: url("#uniqueID");
clip-path: url("#uniqueID");
}
<clipPath id="uniqueID">
<path d="your hexagon, e.g. right out from illustrator. This way any shape should be possible, not just hexagons but also hearts, stars, whatever ... ."></path>
</clipPath>
I tried to use your code, but I’m not sure what I’m doing wrong. Probably this is something really obvious and simple and I’m just confused.
Should I create the structure with divs using ID’s and use the polygon from illustrator as a background image?
Can you help me sort this out?
<clipPath id="uniqueID">
<path d="your hexagon, e.g. right out from illustrator. This way any shape should be possible, not just hexagons but also hearts, stars, whatever ... ."></path>
</clipPath>
Nita Yes of course it doesn’t work, you need to use both code examples. Right now, you have no path defined. Drag in a embed widget and insert your clipPath component. By the way, I just double checked it and for full browser support, you should use both. Use the CSS properties for Chrome and Safari and the URL for Firefox.
And as I said, you can clip anything. I did a quick example and clipped a text … take a look: SVG clipPath with text
(Chrome only, because I used some other stuff you shouldn’t )
Best,
Karl-Heinrich
I forgot to post the read-only link … I’m sorry. This will be much more helpful for you to understand how svg clippath is used … Here you go. Look for “polygon” in the pages tab.
I thought I should maybe update this thread, if someone discovers it by using google or something.
As it turned out, nita_design needed a grid and I though she only needs help with clipPath.
You can find the hexagonal grid built with webflow and no custom code here.
Yes of course it doesn’t work, you need to use both code examples. Right now, you have no path defined. Drag in a embed widget and insert your clipPath component. By the way, I just double checked it and for full browser support, you should use both. Use the CSS properties for Chrome and Safari and the URL for Firefox.
)