Kevin Powell - Community•7mo ago

clip-path not displaying cssbattle safari imac

Im having trouble understanding how clip-path works. I'm going through the cssbattle and clip-path works sometimes, but mostly doesnt display properly. In this battle, i started with a square container and used clip-path to cut out the object. but i cant get the clip-path to display. I tried the same code in chrome and firefox but yeilded the smae results.

<a><b><style>
  body{background:#004416;margin:70 120;display:stacked}
  a{width:160;height:160;background:#82CA9C;position:absolute}
  b{background:#004416;clip-path:polygon(0 25%,25% 30%,50% 25%,75% 30%,100% 25%,100% 75%,75% 60%,50% 75%,25% 60%,0 75%)

<a><b><style>
  body{background:#004416;margin:70 120;display:stacked}
  a{width:160;height:160;background:#82CA9C;position:absolute}
  b{background:#004416;clip-path:polygon(0 25%,25% 30%,50% 25%,75% 30%,100% 25%,100% 75%,75% 60%,50% 75%,25% 60%,0 75%)

6 Replies

Choo♚𝕂𝕚𝕟𝕘•7mo ago

Both <a> and <b> are unclosed, and <b> does not have a height. Also, it is technically legal to have custom tags, but not all emulated environments support them. I don't know if CSS Battle supports them, but it did not work when I tried in codepen. I had to change that into a div with class of b to make it work.

I am GrootOP•7mo ago

Yeah, cssBattle has lax rules becuase its a game of golf where as the least amount of characters used wins the battle. So they allow <a>'s and dont need to be closed. but I did change them to divs and added height and top:0 and it worked. So i suppose its a cssbattle thats throwing me off.

Choo♚𝕂𝕚𝕟𝕘•7mo ago

The height is required. Without it, there is nothing to clip. The exception to this is if there is content, but there isn't any.

I am GrootOP•7mo ago

https://cssbattle.dev/play/1m9sRagWd1AlAO5a5tVA

CSSBattle

The funnest CSS game for web designers & developers

MarkBoots•7mo ago

a different approach, just to let you see what kind of things are possible (maybe useful in future battles)

<style>*{background:#004416;*{-webkit-box-reflect:below -64q;margin:70 120 120;background:0/50%conic-gradient(from -62deg,#82CA9C 124deg,#0000 0

<style>*{background:#004416;*{-webkit-box-reflect:below -64q;margin:70 120 120;background:0/50%conic-gradient(from -62deg,#82CA9C 124deg,#0000 0

(i can not check it because i don't have pro subscription, but it should be good/close. maybe adjust the angles if nessesarry)

MarkBoots•7mo ago

there probably (most definetly) are shorter solutions, this was what came to mind first

Gaming

Programming

clip-path not displaying cssbattle safari imac