HomeОбразованиеRelated VideosMore From: Kevin Powell

How to make shapes with CSS

1959 ratings | 41844 views
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. CodePen from this video: https://codepen.io/kevinpowell/pen/bvWrEV Clip-path website: https://bennettfeely.com/clippy/ Clip-path browser support: https://caniuse.com/#search=clip-path --- I have a newsletter! https://www.kevinpowell.co/newsletter New to Sass, or want to step up your game with it? I've got a course just for you: https://www.kevinpowell.co/learn-sass --- My Code Editor: VS Code - https://code.visualstudio.com/ How my browser refreshes when I save: https://youtu.be/h24noHYsuGc --- Support me on Patreon: https://www.patreon.com/kevinpowell 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. Instagram: https://www.instagram.com/kevinpowell.co/ Twitter: https://twitter.com/KevinJPowell Codepen: https://codepen.io/kevinpowell/ Github: https://github.com/kevin-powell
Html code for embedding videos on your blog
Text Comments (145)
jagpal singh (1 day ago)
hello bro browser issues ie and safari plz webkit code...thanks a tone...
Kevin Powell (16 hours ago)
The codepen works great for me in Safari. If you go in Codepen and, in the CSS panel, click the little down arrow, you can 'view compiled css' which will show where the -webkit- prefux is used. It's using autoprefixer to add it in automatically though, which I'd also be doing for my own workflow.
Tom Douglas (2 days ago)
Very interesting - useful
J Canan (12 days ago)
So awesome! Thanks so much Kevin! Love your channel!
Bhavesh Asnotkar (16 days ago)
learned something new..thnk u
Efrain Flores (1 month ago)
As cool as clip-path looks, it is still not fully supported. I'll keep on waiting.
Kevin Powell (1 month ago)
Hopefully Edge supports it soon. Once it does, support will be the same as with Grid
Hamid Pioneer (1 month ago)
This is absolutely very much helpful. Thanks a lot, dear @Kevin Powell
Kevin Powell (1 month ago)
Really glad that you found it helpful Hamid!
Armin Askari (1 month ago)
dude you ROCK ...❤🌷
Kevin Powell (1 month ago)
shamiam (1 month ago)
Such a helpful video.. great to catch up with you I just wonder where do you live? Coz your 'lovely clear' accent is not pure-american.. :) Love from Egypt
Kevin Powell (1 month ago)
I'm in Canada :)
Lloyd Miller (1 month ago)
Kevin, I'm trying to use the chevron technique, but my background for the first section is an image... What would be the best way to have the image fill the chevron? Thanks in advance!
Kevin Powell (1 month ago)
I'm running back little behind on replying, so sorry about that. Happy that you got it figured out!
Lloyd Miller (1 month ago)
+Kevin Powell thanks! Ya I actually figured it out a few days ago, thanks though!
Kevin Powell (1 month ago)
Probably a clipping path in that case!
Cai Shang-Hao (2 months ago)
Kevin Powell (2 months ago)
You're welcome!
andrewt248 (2 months ago)
I didn’t really look to see if this has been suggested yet, but you could do your normal layout and then wrap your clip-path-specific styles (including things like the negative margin) in an @supports (clip-path: polygon(0 0)) { block }.
Kevin Powell (2 months ago)
Oh I like that :)
Michael Archer (2 months ago)
How often is this actually used in web development though?
Kevin Powell (2 months ago)
Depends on the design. It's not something you'd use in every project for sure, but it's a nice trick to have up your sleeve
Samyak Agarkar (2 months ago)
Wow..that was really great. I love all your videos. They are amazing and very educative. You have taught me more than my college could ever. So, thank you for that. I am also planning to make HTML CSS tricks videos. It would be a great help if you could please give me a Shoutout. Thank you so much 😊
Drunk Frog (2 months ago)
Lekhav Lekhav (2 months ago)
Very nice.. Tq
Fahima Jahan (2 months ago)
Where did you learn this art?
Kevin Powell (2 months ago)
Years and years of practice!
Anton Slavik (2 months ago)
Awesome! I'm crap and making things look nice (in the 2010s) and I design my own business website once every year or so, which always looks.... boxy. This helps a lot.
Oni Honker (2 months ago)
Thank you for this video. I learned something new and it was easy to understand.
Fabian (3 months ago)
Exactly what I searched for long! Thank you so much :D
Marvin Schulze (3 months ago)
great video men! I haven't seen any video about css as good in the last month
Wouter Damen (3 months ago)
I adore your videos. I was never great at CSS, I just knew enough to get by and had to search every problem I encountered on Stackoverflow. I'm really learning all the details and tricks from you and it's fun at the same time.
Kevin Powell (3 months ago)
So glad that you took the time to let me know that, it means the world to me! CSS is tricky, but it's also really amazing what we can do with it :)
Nguyên Bùi Văn (3 months ago)
Awesome work, Kevin. Thanks for everything :)
william pelletiervslol (3 months ago)
how did you do the yellow, red, blue rectangles? boxes? background-color? and how you change the link? i want to go on google type the link and BOOM im on my site
william pelletiervslol (3 months ago)
so you have 3 divs tags
william pelletiervslol (3 months ago)
Kevin Powell ya when i enter the name of my site in the resherch bar in google like www.mysitename.com
Kevin Powell (3 months ago)
I gave divs different background colors to make the different rectangles. When you say go to Google, do you mean search for your site and have it appear, or to put in www.yoursitename.com ??
Shrihari merala (3 months ago)
Hi sir, I am intermediate in html and css this video is definetely helping me out bt have one doubt how did u adjust the clip-path(axis)
14:15 the colors is looks like Pepsi
william pelletiervslol (1 month ago)
I LOVE PEPSI!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Kevin Powell (3 months ago)
Hah, they sort of do!
Jack Wright (3 months ago)
Kevin Powell (3 months ago)
Tanmay Naik (3 months ago)
Great videos. Subscribed.
Tristan Forward (3 months ago)
Thanks Kevin your note about content: ""; is super helpful!
Melvin (3 months ago)
Thanks for the video, loved it! It's so sad that we won't learn these kinds of things in the study I'm doing. ( Graphics Design ). It's all so incredibly basic stuff that you could learn in less than a month but spread in 3 years. Thanks to people like you I can step up my game without depending on my study and learn more than the basic properties!
Kevin Powell (3 months ago)
Really glad that I've been able to help Melvin! In Graphic Design, how much of what you're studying is dealing with the web specifically?
j Noah (3 months ago)
I was looking all over for this type of CSS Tut! You sir are the best!!!! 👍🏽 Thanks a lot for the knowledge. I'm going to be trying this out to expand my css arsenal
Ashish Kumar (3 months ago)
Awesome man, you are my mentor you show so much efforts towards teaching has those topics that are faded away in process of learning web development and design. Thanks a ton !!
Kevin Powell (3 months ago)
No problem at all, super glad to have been able to help 😁
Ganpat Kakar (3 months ago)
Thank you so much for sharing knowledge, i really like this, but i am not getting who the hell is these people who don't like these cool designs (people gave dislike to this cool thing). Anyways i really thankful to you for this this video
Kevin Powell (3 months ago)
Thanks so much for the kind words :)
Peter Lustig (3 months ago)
would have made the second one with borders. Just make 0px width and 50px border and set all except for one to rgba(0,0,0,0)
Kevin Powell (3 months ago)
That would definitly work :)
Sr.Alex14 (4 months ago)
dont understand english but i should whit this code!! Googling so much time for this!! Thanks bro!!!greatings from Panama!!
Kevin Powell (4 months ago)
No problem, glad you were able to get through it despite the langauge!
Lawrence McDaniel (4 months ago)
really helpful. thanks kevin!
Kevin Powell (4 months ago)
No problem at all!
Shadi Muhammad (4 months ago)
Thanks a lot Kevin, I like your tutorials too much. keep going. 👌
Kevin Powell (4 months ago)
So glad to hear that!
Jose Díaz González (4 months ago)
A couple of days ago I was googling how to do this and some info about Adobe Xd, and you randomly appeared on my youtube feed. Amazing work, keep it up!
Kevin Powell (4 months ago)
Thanks a lot. Google is spooky like that sometimes, lol.
Andrei Phantom (4 months ago)
this is great, awesome ideeas
Kevin Powell (4 months ago)
Thanks a lot Andrei, glad you liked it :)
G Rushendra (4 months ago)
it would be great if we see the whole code in a editor and then the changes of you made after the coding in chrome or any other browser
G Rushendra (4 months ago)
Kevin Powell the only problem is, It is little bit messy to figure out what section are you working on. Thanks for responding. :)
Kevin Powell (4 months ago)
It would be the same using CodePen though, wouldn't it? I like CodePen because it makes it super easy to share with everyone and works the same as a regular code editor. What is it that you don't like about CodePen? I do use a text editor on my long series where I'm building out full pages.
budi hartono (5 months ago)
sorry, btw how to make border in clip-path: polygon??? sample : clip-path: polygon(0 0, 100% 10px, 98% 97%, 10px 100%); border: 3px solid #00FF00;
Kevin Powell (4 months ago)
Not much we can do for this, as the border won't follow the clipping path, but the element itself, which the clipping path will hide. The clipping path isn't changing the shape of anything, it's just hiding parts of it. Off the top of my head, I can't really think of what the easiest solution would be for this. I can think of a few super hacky ways, but even then, it would totally depends on the shape that you're after too...
Minhajul Islam Rahid (5 months ago)
Awesome tricks
Kevin Powell (5 months ago)
Glad you liked them :D
Justen Phelps (5 months ago)
Great video! Thank you :)
Kevin Powell (5 months ago)
No problem at all Justen, glad you liked it!
Lloyd Miller (5 months ago)
click-path: polygon with calc and vw is sickkk 👌
Kevin Powell (5 months ago)
Yeah, calc has so many awesome possibilities. Always fun finding cool stuff like this.
Maximilian Dybvik (5 months ago)
Looked everywhere for a good explanation of polygon coordinates! Thank you :D
Kevin Powell (5 months ago)
Glad that this helped you out!
Zambo (5 months ago)
That arrow is easier to do with css borders
Kevin Powell (5 months ago)
Totally could have used borders as well, I don't default to using them as much as I should for making some shapes.
Mohammad Abdul Hye Shaon (5 months ago)
Kevin Powell (5 months ago)
Glad you liked it :D
Ankit Jindal (5 months ago)
hi.. can u tell any alternative of shape-outside property.... this property is not compatible in all browsers..
Ankit Jindal (5 months ago)
Kevin Powell (5 months ago)
For the type of functionality that it has, there is no alternative. It'll come with time, but it's one we've just got to wait for.
Kaloyan Ivanov (5 months ago)
Just binged a few videos of yours - awesome work, man. Can't wait to see more from you :)
Kevin Powell (5 months ago)
So glad you're enjoying my content Kaloyan!
paras kc (6 months ago)
Great One!!
Kevin Powell (6 months ago)
The Great Cheater (6 months ago)
do more videos on css tricks etc... i really enjoyed it.. subbed
william pelletiervslol (3 months ago)
me too
Kevin Powell (6 months ago)
Glad you liked it The Great Cheater, thanks for subbing :D
M Dandan (6 months ago)
thank you !!
Kevin Powell (6 months ago)
No problem 😁
Rebeca Cabañas (6 months ago)
Kevin Powell (6 months ago)
Thanks Rebeca!
PRO ultra (6 months ago)
thank you a lot it was great job
Kevin Powell (6 months ago)
Glad you liked it :)
Kevin Meinrad (6 months ago)
Yes! this was really useful again. Do you think that you could make a video in the future of how to use SVG and its benefits/tips?
Kevin Powell (6 months ago)
I could go over some basics. I want to do a bit of an in-depth look at SVG, but beyond basic implementations of it, I haven't had much of a chance to play around with it. It's on the list for sure though, as it has so many practical applications and good uses.
skylinecanvas (6 months ago)
Hey Kevin, just a heads up im getting this from chrome from your site - not sure why though. Great video anyway! Thanks! "Your connection is not private Attackers might be trying to steal your information from bennettfeely.com (for example, passwords, messages or credit cards). Learn more NET::ERR_CERT_AUTHORITY_INVALID"
Kevin Powell (6 months ago)
That's really odd, it should be a secure connection, it's on https... plus that's not my URL :\. I just double checked on my computer in a few browsers and didn't see any issues. Very strange indeed. If you get it again, could you do me a huge favour and send me an email at [email protected] - I'd really appreciate it.
erykwks (6 months ago)
Super cool vids . Thanks for that! :)
Kevin Powell (6 months ago)
No problem at all erykwks :D
BigDk Mcgee (6 months ago)
Hi Kevin, are you working for a Company or a Freelancer ?
BigDk Mcgee (6 months ago)
Very nice,i love all your videos.You are very good Web Designer.Keep it going with the videos,Thank You.
Kevin Powell (6 months ago)
I'm a full-time teacher at a school, and part-time freelancer on the side, though these days YouTube takes up more of my time than anything else.
Wow, spot on, once again :D I always wondered how to make these kind of shapes... I always figured it's an image, done in photoshop, and just placed as a background. Good video!! :) btw....for the arrow thing, there's maybe an easier way. There's something called "css arrows". It's done in a different way, but I think the result is the same. Plus, you don't have to bother with two boxes. It's much cleaner, I'd say, and much less code :D Here's a link: https://css-tricks.com/snippets/css/css-triangle/
Kevin Powell (6 months ago)
I probably should have included something like that as well, completely skipped my mind! I'll have to do that in another video at one point. We can also use SVG and clipping paths to make some really cool shapes too, I'll be looking into that at one point as well.
Rob Pwr (6 months ago)
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 🙂
Kevin Powell (6 months ago)
Hah, that's awesome, glad my timing was so good Rob!
blokche (6 months ago)
Great tips and tricks, as always I should say! Thanks!
Kevin Powell (6 months ago)
Glad you liked it :D
Micheal Jones (6 months ago)
100th like!!! what did I win??? ;P
Kevin Powell (6 months ago)
A trophy! 💯🏆💯
Kapil Anand (6 months ago)
Thanks man...
Kevin Powell (6 months ago)
No problem!
Mona-Effect (6 months ago)
this is really very useful
Kevin Powell (6 months ago)
Glad that it was useful Mona-Effect
Nikhil Tyagi (6 months ago)
Thank you so much! Best channel on youtube!!
Kevin Powell (6 months ago)
Thanks Nikhil!
Christine Jurewicz (6 months ago)
Just what I needed for something I ran into recently. Thank you!
Kevin Powell (6 months ago)
Awesome, glad the timing was good Christine!
VaiGo (6 months ago)
It was great
Kevin Powell (6 months ago)
Glad you liked it!
Iberno Hoffmann Vitorio (6 months ago)
Thank You sr... Awesome like always..
Iberno Hoffmann Vitorio (6 months ago)
Always Man... your videos are really Helpfull.
Kevin Powell (6 months ago)
Thanks, Iberno, you enjoyed it :)
Youssef Elmajbri (6 months ago)
Thank you, it's an interesting video I love it! For the third section, I think (transform)skewY works perfectly.
Youssef Elmajbri (6 months ago)
Yea, I use it in the non-rectangular header a lot! Thank you
Kevin Powell (6 months ago)
Yup, that would've worked and probably would've been easier to understand, hah. Pretty much what I did, I just didn't explain it well at all. If you put two numbers, the first is for X, the second is for Y.
Teppichkuchen (6 months ago)
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!
william pelletiervslol (1 month ago)
emojji is just a h1/6 lol
william pelletiervslol (1 month ago)
nvm tried something and it work
william pelletiervslol (1 month ago)
is .one a div? cause now im rlly confuse about the emojji and the fack tht you wrote place-item: center; and the circle goes right in the middle of the emojji
Dustin Poissant (5 months ago)
If im centering text in a fixed height container just use line-height: 100px and text-align: center
Kevin Powell (6 months ago)
For sure, I use that a lot! I do like that we don't have to with flex and grid, but as you mentioned, that has better browser support :)
Tech Nepal (6 months ago)
Looking forward for more this kind of videos 😉😉
Kevin Powell (6 months ago)
Glad you liked it :D
Mann (6 months ago)
Very helpful! Thanks a lot
Kevin Powell (6 months ago)
No problem at all Mann :D
tarun juluru (6 months ago)
Great! Thanks
Kevin Powell (6 months ago)
Glad you liked it :)
Ro Fa (6 months ago)
Thank you Kevin ♥
Kevin Powell (6 months ago)
No problem!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.