Can I use global variables inside CSS proprety

Question

I know this works left: var(--mouse-x); you can update this values using JS which it's my goal here. My situation is a bit different, see I am trying to create an animation and I need to dynamically changes values in this line

clip-path: polygon(var(clip1) 0, 100% 1%, 100% 100%, 50% 100%);

Here's my attempt

 let root = document.documentElement;
 root.style.setProperty('clip1', e.clientY + "%");

The error is values are not set maybe because that variable is nested right there. Any suggestion?

Answer 1

Should be:

clip-path: polygon(var(--clip1) 0, 100% 1%, 100% 100%, 50% 100%);

Look here:

Creating CSS Global Variables : Stylesheet theme management