CODEWITHSUNDEEP
css
Figares
Figares

Reputation: 71

Is the MDN (and pretty much every other) reference to clip-path: path() wrong?

I am trying to do a very simple thing, to use clip-path with the path property, and making it scale to the whole size of the div containing it. I've researched more than just a little and in some places the [geometry-box] property gets mentioned, but I can't get it to work (I'm on chrome, v102.0.5005.61, last version at the time I think)... The code that I tried up until this point looks something like this one:

.wholePage {
  width: 100vw;
  height: 100vh;
  background-color: red;
  clip-path: border-box path('M0,0 L100,0 V90 Q 27 110 0 90');
}
<div class="wholePage">
</div>

The thing is, without the border-box value, the path behaves in the way I expect it to (not scaling). But besides what some places say, adding the value border-box doesn't fix it (in chrome at least, it doesn't even recognize the property value with both path() and border-box). I know I could accomplish the result I'm looking for with a simple svg, but I want to understand the syntax of clip-path, and if it could be possible to make it scalable with just some other value.

Hope the question isn't too trivial :p thanks in advance to all willing to help me with this... I'll leave the link to the mdn reference I was talking about

Upvotes: 0

Views: 78

Answers (1)

Jakub Kotrs
Jakub Kotrs

Reputation: 6244

Chrome just doesn't support <geometry-box> and there is an open issue for it in Chromium bug tracker:

https://bugs.chromium.org/p/chromium/issues/detail?id=694218

Upvotes: 1

Related Questions