Streaming live at 10am (PST)

CSS Polygons in Firefox and Edge


#1

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?

Here is the preview link:
https://preview.webflow.com/preview/polygons-help?preview=9fc3c1b051eb9d9277f16ad3054be449

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 :wink:

Thanks in advanced for your help!


#2

Hi @nita_design

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>

Best,
Karl-Heinrich


#3

Hi @Karl-Heinrich,

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>

Thank you once again,
Sónia


#4

@nita_design

Nita :yum: 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.

So you still need to use this

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

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 :joy:)
Best,
Karl-Heinrich


#5

@nita_design

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.

Best,
Karl-Heinrich


#6

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.

Best,
Karl-Heinrich


#7

Hi Karl,
I'm still trying to make my grid work based on your awesome preview link.

Thank you so much for your help. I'm sure this technique will be very useful for the community as well.

Best,
Sónia