 Today, I've had a little bit of a play with the images for the Chrome Dev Summit site, the mast head images. If you look at what I've got on screen, it's the, these mast heads images have the kind of angular kind of cut off at the bottom. And I was thinking about this, there's kind of a couple of ways you could do it. One would be, you actually just have the image as a rectangle and then you kind of overlay something on the top, like a triangle, like say using SVG or something. And that's actually what I did in the holding page, the kind of announcement page here. There, these, this has a slight angle on it, which you can probably see if I make it a bit smaller, has a slight angle on it upwards. But the thing is when you've got that triangle, when it butts up to the sort of rectangular, white rectangle above it in this case, sometimes it's like a hairline crack and I filed a bug against Chrome saying, there's a hairline crack on phones because I assumed it's some kind of rounding issue to do with not exactly lining up. Anyway, so I was like, okay, I need to find a different way. And I've been messing around with SVG and it's been, no, it's one of these things that I just, I could not get it right. Here's what I actually had, right? So I've got the image and see that kind of roughly works. If you look at it, actually let me switch across to VS Code. Right, what we've got is there's an image, which is a pattern. So there's a rectangle here, which uses the image as a pattern. And it could have been, I think it could have been, I could have used an image element, actually a square image element because this was kind of where I got to. And then there's a clip path of this clip and the clip is the kind of, it's a rectangle with a triangular bit at the bottom. Because of the view box that's set, it's sort of, it's all kind of kept broadly in proportion. I don't mind the angle of the triangle kind of squishing in and out. It just kind of has to look okay-ish for the screen size it's on. The problem is like the effect isn't what I want because the image is kind of getting smaller and shrinking to the bottom. That's because it's X mid Y max on the preserve aspect ratio. So I was like, okay, why don't we do preserve aspect ratio non? But then you get that, which is like, yeah. So now the clip is kind of doing what I want, right? It's always clipping there, but obviously the photo's getting squashed. So, and it's also the case that if I do like X mid, Y mid, which is kind of what I want from the photo, as in I want the photo to, when the screen's really wide and you can't really see it here. And if I zoom, oops. If I zoom out, like it doesn't, it doesn't spread. Whereas with the anyway, this isn't working for me, right? So, but Chris Coyer, thanks Chris. Yes. So as opposed on CSS tricks, which I guess will make sure it goes into the description, which talks about using SVG as a clip for non SVG content, which is pretty much what I've got here. And in fact, that's what I've got gone ahead and done over here in index page. Now you can see I've got the image doing what the image does. And that's just basically, it's just a div with the background and it's set to background size cover. And if I don't have the clip on it, there we go. If I don't have the clip on it, you can see it just kind of, that kind of pretty much does what I want it to do. And then I can use media queries to make sure that, you know, if I need a small image, whatever, but, you know, I switch on the clip path and the clip path is just basically this SVG with a clip path that's defined by the object's bounding box. So it just basically maps to the normalized version of those previous, like, view box values, where one is the maximum height and one, one, one, zero, zero. Anyway, that now works brilliantly. So it's just more that I've kind of cracked that particular problem for now, which is kind of a way to off. The only thing that really caught me out when I was looking around was like, I couldn't get clip path to work. It doesn't throw any kind of warning or error in Chrome, it just doesn't do anything. It's still WebKit prefixed, but yet it's got a line through it saying, it's being overridden by this. So I think I'm gonna file a bug that says, it should be one or the other. We should kind of put something against clip path that says, actually, I don't support clip path, or if we do, we should actually support clip path rather than WebKit clip path. Wow, didn't realize that was gonna be a hard word to say today. So there you go, clip in with SVG on non SVG elements. That should mean that I can do this kind of effect and then have, you know, other stuff behind it peeking through and all the rest of it, which is exactly the effect that I want. And I didn't know exactly how I was going to achieve it. Wait off. Don't forget to subscribe. If you wanna catch more of these videos and you can check out the code on GitHub, I've been pushing stuff there. Toodle-oo.