Check out a free preview of the full CSS In-Depth, v2 course:
The "CSS Shapes" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Text and images don't have to be rectangular. You can reshape images and flow text around shapes and jagged edges using clip-path and shape-outside. Estelle uses an SVG to clip a shape out of an element.

Get Unlimited Access Now

Transcript from the "CSS Shapes" Lesson

[00:00:01]
>> Estelle: Then we have clip-path and shape-outside, so I'm taking this image, and I'm gonna make a 30, I'm gonna make it a 30-pixel circle. The problem is my text is still all the way over there. So I was able to change the clip-path or clip my image using clip-path, And I use circle but I could also use ellipse or polygon.

[00:00:24] But to make it really cool, I'm gonna shape the text around it. So you see how that shape goes around that circle? I'm gonna change the image to an ellipse and I'm gonna change the text around to follow that same side. So what I did is I just declared a clip-path, and then I declared en ellipse with the exact same properties.

[00:00:46] I could have made it a slightly different so that there was more space, or I could have put padding, or margin, rather. Now I'm gonna do a polygon, which is a triangle. And again I made the text go outside it. The thing is you can't actually put the text over here yet.

[00:01:06] So let's do a few more. I have a cat and the text is going around it. And now it's a more triangular shape and the text is going around it. If you wanted to do more complex shapes, you can actually do a clip path and give it the URL of an image.

[00:01:26] So here I have a heart, and I basically clip it to match the heart. So the idea of this heart is here, and so I made the cat in a shape of a heart. Here I have my avatar which is the stem plumber, he's fixing the pipeline, and i did shape outside of a polygon and I did clip path polygon.

[00:01:56] So I actually used a tool to do this, and I know better than to try to make that tool work during a presentation cuz it always fails when I try to present with it. So I said I know better but I'm gonna do it anyway. So if I go to Elements, pick this,

[00:02:25]
>> Estelle: You can see that I have the shape outside here and
>> Estelle: I have this thing called shapes, I put this extension here and
>> Estelle: I told you it wouldn't work. So I have this extension that allows me to do shapes. And you can see where the shape is, right, where it's darker, but I can never actually get this to work for me during a presentation.

[00:02:58] It does actually work, though. So it's the shapes editor, and it's just a Chrome extension.