# The path() & url() functions for clip-path property doesn't work in perspective

**URL:** <https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901>\
**Category:** Ignition Early Access\
**Created:** [April 22, 2021, 7:15am UTC](https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901 "2021-04-22T07:15:17Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [April 22, 2021, 7:15am UTC](https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901/1 "2021-04-22T07:15:17Z")

</div>

Hi,  
For the clip-path CSS3 property all available syntaxs like circle(40%), polygon(50% 0, 100% 50%, 50% 100%, 0 50%), etc … are working except path() and url() functions.  
I try those but nothing is happening:

```auto
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z')
cli-path: url(/system/images/clipPath2.svg)

```

It seems a bug to me. Is anyone else able to use those?

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [April 22, 2021, 4:10pm UTC](https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901/2 "2021-04-22T16:10:14Z")

</div>

What component are you trying to style?

(also fix `cli-path` to `clip-path`).

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [April 22, 2021, 5:10pm UTC](https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901/3 "2021-04-22T17:10:24Z")

</div>

I’m using in image or label or container which work for the other option.  
The actual code is clip-path 😀

---

<div class="post-metadata">

**Author:** ![YF129701](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/yf129701/32/60498_2.png) [@YF129701](https://forum.inductiveautomation.com/u/YF129701)\
**Post date:** [April 22, 2021, 6:33pm UTC](https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901/4 "2021-04-22T18:33:37Z")

</div>

Okay, here is what I found out about `clip-path: path(<path>)`. It is not supported in all browsers (I would say most browsers). I was able to see the `clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z')` CSS property on a label with a background color in Firefox version 88.0.

Here are the articles I’m reading:

> **[Unfortunately, clip-path: path() is Still a No-Go](https://css-tricks.com/unfortunately-clip-path-path-is-still-a-no-go/)**
>
> I was extremely excited when I first heard that clip-path: path() was coming to Firefox. Just imagine being able to easily code a breathing box like the

> **[Animating with Clip-Path](https://css-tricks.com/animating-with-clip-path/)**
>
> clip-path is one of those CSS properties we generally know is there but might not reach for often for whatever reason. It’s a little intimidating in the

I played around with the URL path as well but didn’t get it to work either.

If you do find anything new out, let me know!

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [April 23, 2021, 5:11am UTC](https://forum.inductiveautomation.com/t/the-path-url-functions-for-clip-path-property-doesnt-work-in-perspective/45901/5 "2021-04-23T05:11:33Z")

</div>

Interesting, I almost test it in all modern browsers and it works every even (pure CSS HTML code of course not perspective).  
Even there are tons of tutorial about it.