I need help creating this division effect using CSS.
Hey all! hope you're well!
I am creating a project at the moment, and in my hero section, I want a series of images in a slideshow on the left, and on the right a solid color with some text and a button in it.
Currently I am just trying to work out how I would set up the container for this.
Ideally I would like to achieve this divide effect without having to edit the shape of the images themselves, so the dividing solid color would sit ontop of the images, and I could then place my content on top of that.
The closest I managed to get to the desired result was a diagonal solid color using border-left and border-bottom, however it doesn't work as the border cannot be transparent as far as I can tell.
Are any of you out there good with this sort of stuff? It's going to keep me awake and I'd love to be able to do it.
9 Replies
Try a clip-path
https://bennettfeely.com/clippy/
With clip-path, there's a few ways you can solve this. You can put a psuedo element on the text or image container and put the clip-path on that, or you could put a clip-path on the image (seems like you don't want this though) or the text
Thank you vince! I was looking into clip path but it seems like it's not really supported very well, am i mistaken?
Ohh that I don't know off the top of my head, let's check
It is! https://caniuse.com/css-clip-path
not to mention if it isn't supported and you set it up properly, it'll just be a straight line instead of a slanted one, it shouldn't break anything to the point of not being usable so it's just a nice little progressive enhancement
Thank you both , I'll look in to it properly tomorrow and give it a go. I really appreciate the replies, thank you!
Yea for sure! Let me know if you run into any issues and I'll try to help out
brilliant, thank you
support for the kind of
clip-path that you're looking at here is very good (https://caniuse.com/?search=clip%20path%20basic%20shape). There are issues with things like use of geometry box values and whether you can use an svg clipPath as a path reference that are still iffy. This is all in the process of getting cleaned up as part of Interop 2023.it you want to maintain a consistant angle (not effected by the size of the image), you could also use a mask-image with a conic gradient at the top right corner (would also need -webkit prefix)