YHow 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?
JAny image will overflow, just make sure you have
overflow-x: hidden; and overflow-y: visible;JMDN Web Docs
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.
JYouTubeKevin Powell
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...
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=nomorehiddenOverflow 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...
YI want the left and bottom sides of the image to be overflow hidden overflow-left overflow-right right does not exist
JRight, you'll need to clip the image itself in a raster based image editor (like Photoshop).
Jyou can't create a mask in CSS
Yhmm it is easier
YI did stumble upon this https://developer.mozilla.org/en-US/docs/Web/CSS/mask-clip#examples
MDN Web Docs
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.
Ybut the mask path needs to be closed
Yprolly not worth the effort imma just crop the image
Jya, but there isn't full support for Edge and Safari
JIt 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.
JPerformance is definitely something to think about here.
Yyeah imma go with that just wanted to see if there was a better way
Ythanks for the help
CGetting 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.
Cthe 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.CFYI 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.
SCouldnβt you just clip the bottom left corner of the image to round it, and then use a pseudo element for the background?
Cthat 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.
SCan you not use a variable with the border radius in and include it in the clip path url?
VI'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?CI 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?
Vgood point