Custom CSS - Clip-path and object-fit

sarraesmith — Wed, 23 Jul 2025 13:47:55 GMT

I am creating some custom designs on existing elements for my front hub page and for one of those I want to create a diagonal line through an element to separate text from image like the black/white slash here:

Typically this is done using clip path, but only the deprecated clip function shows up blue under my custom <style> tag. Unfortunately clip only really supports rectangular clipping, unlike clip-path.

Also, I am trying to change my images so that they are contained by the card container using object-fit: cover, which also doesn't seem to work.

Does anyone know the syntax for either of these things? All of my elements are pure CSS.

Reference pages
Clip-path: https://www.w3schools.com/cssref/css3_pr_clip-path.php
Object-fit: https://www.w3schools.com/css/css3_object-fit.asp

Re: Custom CSS - Clip-path and object-fit

JustinPrather — Fri, 25 Jul 2025 18:58:06 GMT

@sarraesmith –

Gotta say, the layout in the screenshot looks great. Are you saying that clip-path hasn't been working for you? I took the example featuring the hot air balloon on the clip-path page of Mozilla Developer site ... and I was able to get it functioning in a Hub page.

Do you have a Codepen or some code that you could share?

topic Custom CSS - Clip-path and object-fit in ArcGIS Hub Questions

Custom CSS - Clip-path and object-fit

Re: Custom CSS - Clip-path and object-fit