How to make shapes with CSS

It's pretty easy to makes shapes with only a small amount of HTML and some CSS. We have super simple options like border-radius, we've got slightly more complicated things we can do with pseudo elements, and if you need some really unique shapes, we can use clip-path.

Border radius is nice for making some very simple shapes, and it's very easy to do. I don't explore it too much in this video, but it's a nice option that has awesome browser support.

Pseudo elements also have awesome browser support, and they allow us to make some rather complicated shapes with only CSS if you're up to the task! In this video, I make a chevron type thing with them.

For the really complicated shapes, clip-path is the answer. You can create literally any shape you want, the only thing to watch out for is browser support. It's not terrible, but there are some places where it won't work, so make sure whatever you're using it for isn't an essential design element, but something which can fail gracefully.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[Mwtorres]

This video is GOLD. Thank you, Kevin. We need these types of simplified videos more often.

[anad]

You're such a great communicator! Thanks for breaking things down so nicely!

[fuseteam]

"if you find this 6 months from now"
me coming 2 years later: i wonder how good it is now

[trungbuichi]

I was desparate of trying to create different shapes by border combine with transparent and then I found this. What a badass vid! Thanks a bunch!!

[brandon]

you're literally the css god i have been looking for!

my css skills have gone through the roof since I am doing the cssbattles with your videos.

*THANKYOU!*

[WingedDestinyX]

I am an iOS dev and I just started getting into building websites again (love to do front-end work). Your videos are gold! Thanks a lot :D

[timkimdesign]

display: grid;
place-items: center;


simple and easy. Thank you.

[LaserTechNate]

Oh my god. Place-items? are you kidding me? how have I not seen that. There's gold information for css learners from beginning to end here. Ty. Subbed.

[MarkOhanesian]

Kevin, this is one of the best CSS tutorials I've ever watched! Thank you so much.

[typingmasterpro]

I have seen your lot of videos and this one is helped me a lot than others. Nice little work you have put in this video. Thanks, mate.

[teppichkuchen]

Hello Kevin, thanks for that input! :) I have one hint for you: you can also centering things with "top: 50%; transform: translateY(-50%);". Its very useful and crossbrowser compatible. Keep up the good work!

[fpgroups]

It is like a magician revealing tricks of the trade!

Nice work.

[abdessadekelaasri]

The best Teacher ever!! I have seen a lot of your videos and I don't think anyone loves CSS more than you do : )

[ricardopassos]

I could feel what you felt when you used the calc function and everything worked as expected. In addition, your "strategy" in your last example gave me some insights on how to use the calc() function.

[RobPwr]

Ha I was just thinking the other day “how the hell do I do different shapes” and was going to have a look this weekend and what pops up, your video! Perfect 🙂

[recursionError]

Looked everywhere for a good explanation of polygon coordinates! Thank you :D

[geralt]

11:14 thank you for that!
That's all I needed for this video
Thanks! You're the only dev that's helping me to get to know around

[BasicMike]

A really fantastic explaination of how to make shapes with CSS. I hope you'll produce a more extensive explaination on what you can do with clip-path and the difference between clip-path and clip-rule.

[adanedhelbg]

Just binged a few videos of yours - awesome work, man. Can't wait to see more from you :)

[marvinschulze]

great video men! I haven't seen any video about css as good in the last month