Custom CSS - Clip-path and object-fit

[sarraesmith]

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

[JustinPrather]

@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?