19 Replies
How can this be done is there a way to manipulate overflow to get this or pseduo elements that are placed in a certain way to clip off the image?
Any image will overflow, just make sure you have
overflow-x: hidden; and overflow-y: visible;MDN Web Docs
overflow - CSS: Cascading Style Sheets | MDN
The overflow CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.
Also check out this:
https://youtu.be/72pUm4tQesw?si=IClFBhUeOtVw52Zq
Kevin Powell
YouTube
2 better alternatives to overflow: hidden
Looking to up your CSS Game? Free & Premium courses 👉 https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=nomorehidden
Overflow hidden is one of those features that seems like it should work in a very specific way, but it comes with a few strange side effects that can be incredibly frustrating and hard to fix.
Th...
I want the left and bottom sides of the image to be overflow hidden overflow-left overflow-right right does not exist
Right, you'll need to clip the image itself in a raster based image editor (like Photoshop).
you can't create a mask in CSS
hmm it is easier
I did stumble upon this https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip#examples
MDN Web Docs
mask-clip - CSS: Cascading Style Sheets | MDN
The mask-clip CSS property determines the area which is affected by a mask. The painted content of an element must be restricted to this area.
but the mask path needs to be closed
prolly not worth the effort imma just crop the image
ya, but there isn't full support for Edge and Safari
It would be much more efficient to just clip the image before hand instead of asking the browser to create a complicated mask each time the image loads.
Performance is definitely something to think about here.
yeah imma go with that just wanted to see if there was a better way
thanks for the help
Getting the mask to be the right shape can be complicated. The much easier option is to erase the background on the image. You can do this in Photoshop or use one of the free online tools. When the background is replaced with transparency, this layout becomes very simple.
the bottom left corner of the image or container element could be clipped with something like
clip-path: inset(-90px 0 0 0 round 8px); this could be used to clip the right, bottom and left but clear enough room for the heads while maintaining the rounding.
FYI as well, CSS mask was mostly cleaned up as part of Interop 2023. So if this is something that folks have been avoiding for compatibility reasons. That is not a huge concern anymore.Couldn’t you just clip the bottom left corner of the image to round it, and then use a pseudo element for the background?
that always seems like a great idea in theory but in practice having 2 elements separately anti-aliasing a round corner almost never lines up well.
Can you not use a variable with the border radius in and include it in the clip path url?
I'm wondering too why you need clip-path? Can't you just set the
border-bottom-left-radius to inherit or whatever the container is?I think part of the issue we are having here is not knowing what the original image the OP is using looks like. ie are we only clipping off part of the persons right arm or are we also clipping legs?
good point