Hi all,
I have photo in a block that's been clipped with -webkit-clip-path. The clip works, but the clipped area is now black on the original screen. See below.
How do you change the black area to white? I've tried a few CSS variations, in the block and on the original screen with no luck. Any help appreciated.
(mobile application)
Thanks,
Brad
Hi Brad,
In addition to the previous replies, just want to include that - For such use-case, we do have a predefined style class called img-circle, which you can refer to in the Image widget Style Classes property as shown below.
Kind regards,
Benjith Sam
Hy Brad,
I suggest creating a css class and applying it to your image
Thanks Alexandre. The main screen is black. See below.
Main Screen:
Within Block - Image being clipped:
Thanks Benjith. Do you know how to adjust the radius?
I tried:
img.img-circle { border-radius: 70%; }
You are welcome, Brad :)
As per the predefined img-circle style class definition the default border-radius value is var(--border-radius-circle) = 100%
And setting the border-radius value beyond 50% is not reflecting any changes to the image.
Hope this helps you!
Okay. Got it. Had to combine img-circle and -webkit-clip-path to clip in the phone theme custom CSS.
.img-circle{ -webkit-clip-path: circle(115px); }
Then in the main page, override with:
.img-circle{ -webkit-clip-path: circle(35px) !important; }
Thank you Brad, for sharing the final implementation :)