How to make shapes with CSS
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1702986093_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: How to make shapes with CSS
Hi and welcome in this video we’re gonna be looking at how we can create different shapes using CSS we’re gonna look at how we can make anything from a little simple circle to this section here where we get a little triangle sort of sticking down like that as well as
Changing the shape of my image here and doing this big different section here when I look at a whole bunch of different ways we can create these types of shapes okay so I’m not gonna focus on the HTML of this one too much but I’m just gonna look in my section one here
Of my h1 and my one icon so the one icon is what I’m a focusing on there on the section two will be looking at the image as well as doing something with our whole section two in the section three so therefore sort of decoration where we
Use it so we can actually see the the shape difference going on with those ones so let’s get started on this and we’re gonna start really nice and simple with my one icon so the one icon that I did this is just really basic stuff on
Creating shapes so let’s do one icon and let’s give it a background of our GBA and we’ll do zero zero zero 0.3 just so we have something that we can sort of see great then let’s give this a width and a height because for this I think
That makes sense to do and there we go we got a nice little square there we can do a margin:0 auto and that will put it right in the middle and i can do on this a border radius of 50% so if you’re not familiar with the border radius to make
Circles it works really well just make sure you’re working with a complete box because if you’re working with other things that makes ovals that sometimes don’t look really terrible so just putting a border radius on a perfect square gives me a nice little circle like that now do you actually get my
Smiley face dead set in the middle here I used to always do a display flex on there and use my justified content and align items I just learned a really nice trick the other day which is display grid and place I Center and oh my goodness it goes in the middle
And what place items is doing is it’s a shorthand property for justify items and a line item so it’s doing a justify item Center and a line items Center and it’s putting it right down in the middle and I can use that with my nice little display grid they’re so nice now browser
Support very questionable I don’t know if I’d want to be using this in the real world but really nice and cool and just as a little side note you can learn about little things like that in my new newsletter I’ve just I created one there’s more information of that at the
In the description below but also I’m gonna talk about it a little bit at the end of this video so let’s bring up the font size to like 2m just make it a little bit bigger and this is kind of fun to do also if you have a background
That’s already like an RGBA and you make the color the same rgba it just be the same thing in a bit darker because here it’s just gonna be like 0.6 now right so it’s like layered opacity on top of each other so a nice little
Way to do that so that one’s the really basic one and i want to jump down quickly to section 2 because i don’t want to spend too much time i think the more interesting thing there was actually the this part of it than anything else and so i want to focus now
On my or not not there yet actually let’s jump up creating that little arrow shape now there’s other ways of doing this this isn’t the only way but i’m gonna be looking at using clip path and some other stuff to do some more interesting stuff down in section 2 so
Here to make that little arrow thing I’m gonna do it with pseudo elements you don’t know a lot about pseudo elements please check out my other series where I drove more into those there’s should be a card popping up somewhere for that to write about now
I have one before so I want to select both my before and after and I want to give them a position:absolute let’s give them their content of nothing whoops find the right keys there there we go I give it a width of like 200 maybe 150 pixels and a
Of 150 pixels and I’m gonna go to background of red just so we can see what we’re actually dealing with right now so there’s my two boxes that I’ve just made um so let’s move them down bottom of zero and I think that’s it for
The moment and because what I want to do is come on to each one separately now so one will start with my before and for this one I’m gonna move it to the right by 50% so it should move on over a little bit and then I’m gonna do a nice
Little transform and we’ll do a skew on it now excuse it weird property if you’re not sure what it is let’s actually hide my after we’re just gonna do with one now so we’re gonna see what one square is doing when I skew this so
I’m gonna ask you of 20 degrees and you can see it just sort of like okay it’s gonna take it and just sort of skew it I don’t really know in other word so it’s pulling the top one way in the bottom the other way and the bigger the
Number here the more it gets skewed whoops we can’t do a 90 degree because it’s gonna disappear for say 50 it gets pulled and pulled 90 degrees it’s just it’s pretty much laying flat and it doesn’t really work like say we did 80 degrees it’s starting to get like that’s
A 90 degrees it’s it’s skewed all the way over and we can’t see it so I don’t want it to be that extreme though so let’s try like 20 but I don’t want to just do 20 degrees like that I’m gonna do a 0 comma 20 and you can see what
That’s doing is it’s actually sort of twisting it instead of skewing it which is exactly what I want because I want it sticking out at the bottom now the only problem is I can’t see it so I’m also gonna fit is that said index doesn’t have tips doesn’t have to be that big
But let’s put 100 and so you can see it’s sticking out a little bit here and I move my bottom down maybe just a bit I don’t know whoops negative 1 ma I should say I just want to make sure this isn’t sticking out
Here I want it just to be sort of a clean thing like that so that’s great now what I’m going to do is I’m going to bring my after back on here one after and now I want to sort of do the same thing with that one
So let’s copy that and get my after in here but obviously I don’t want my right I’m gonna do this on the left so you can see the dirt on this one you know the two sides are touching they’re lining up perfectly by doing that and instead of
Doing 20 we can doing negative 20 and now it’s sticking down it’s coordinate actually this can be used for other stuff too it’s this nice little chevron shape you can use this pretty much anything or not anything but you can use it for other design elements but all I’m
Gonna do now is just take my background that I have here and change my red to the same one and look at that we just get a nice little sort of arrow pointy thing instead so that’s kind of cool again there’s other ways of doing this the nice thing with using before and
After to do this is browser support will be super super good and you can use it for different stuff does take a bit on markup but you get there now let’s move on to looking at some clip paths because clip paths are really cool browser support is it could be better it’s not
Terrible but it could be better now if you’re gonna do a clip path on an image like this it’s probably decorational so even if it doesn’t really work it’s you know some graceful degradation which isn’t the end of the world um so I’m gonna start by doing the clip
Path on my image itself so we can come down here and take a look at two image which is the class I put on my image and I’m gonna give it a clip path now clip paths are kind of weird to work with if you’re not used to working with them but
I’ll show you a really cool tool in a second so for my clip path you there’s other things you can do I can just write in circle circle just like that and I get a circle and in here I could write in my radius 50 pixels and it’s gonna
Give it a radius of 50 pixels or I could put you know 25% even and it’s gonna deal with 25% of the original image obviously if this is bigger than the original then you get something like that so if you know there’s kind of useless so clip paths are kind of cool they’re
Nice for just cropping things down and doing some fun stuff with them a hundred percent will give you you know you’re not really gonna see it ninety we’re gonna start seeing it come in I would think oh there we go you can see that now it’s starting to clip
In at fifty percent um so that’s a nice fun thing you can do you can also there’s other options here and there’s a link in the description to something else and I’m gonna look at a fun tool that we can use and we’re gonna look at
How it actually works I’m gonna be right in polygon which lets you come in with a custom one so when you circle it’s obviously in me asset circle and stuff like that and there’s other shapes you can do but I want to do one that’s my
Own custom shape so I’m gonna put 0 0 here and just to explain actually before I do that and this is my zero zero point so you’re dealing with the x axis X Y X and y axis is X YZ m and so this is my
Zero zero so this is my first point if I come all the way along here I’m staying on my zero for my Y but my ex is becoming one hundred percent because I’m moving all the way to the end of it then down here would be 100 100 and this one
Would be zero one hundred so let’s set that up just so there’s no clipping at all to start with so 0 0 is my first point my second point is 100% 0 my third point is 100% 100% and my last point is 0 100% and I give myself a perfect
Square so that’s kind of cool and now I can play with these numbers I can come this is my zero zero so if I make this a 25 pixels it’s gonna move over 25 pixels and if I take this one here 100 pixels it will move down 100 pixels and I start
Getting an interesting shape coming in there now also I don’t need to have necessarily this many points let’s come in and add another one let’s just say 50% 50% and see what happens and you can see it’s adding another point in to the end there so it’s going in order so it’s
Always it’s the same way I’m taking a clock it’s going to start in your top left welcome starts in the middle but it’s gonna start top left and work its way around so the 50% 50% got added between this one and the one that I have there so you
Can start to come in and create your own shapes like that so that’s kind of cool I’m gonna put the link to this site down in the description below which is a really nice one because it comes with all the shapes that are already there
And you can play around with them and if you get a shape and you want to modify it Hey look at that you can come modify it and it gives you a nice code that you can copy down below so custom polygons you can even just click and add some
Points in and do anything you want I’ll create some crazy shapes and stuff like that or you can use some of the ones they already have and modify them like I mentioned so this is really a nice little tool that you can use and again this link will be in the description
Below for the purpose of this one I’m just going to do nice and simple where I’m gonna change this this one here actually to 75% and let’s put this back to a zero zero just to have sort of a cut off angle on that something a bit more interesting nothing too crazy but
It’s kind of fun and now the last thing I’m going to do is I’m going to change the angle of the between my two different sections here so let’s go in number two now I’d sort of set this up ahead of time but um so I gave it a margin bottom
Of negative ten I’m gonna take that off for the moment just so we can see why I would have done something like that okay so on my two that’s going to we’re going to add another clip path in here so we’re going to clip the path and once
Again it’s in me a polygon so this is for my entire section so this whole thing with this salmony color here and let’s just make this bigger so we can actually see what I’m writing and so let’s start again with a zero zero because we don’t want anything on the
Top to change so that will stay 100% zero then ideally we’d be going all the way down so let’s say we go like 100% actually let’s just make it a square and then we’ll play with it because it’s a little it’s nice to be able to see what we’re actually doing right
100% 100% and now I can see my my whole section and it I mix these up flips this one here should be 100 100 and then this one should be a zero 100 there we go okay so that’s the normal one now the idea here would be to take this corner
And move it up so that’s the third point so that’s this one here and I’m moving the this access the up and down access is always right here on this one now the tricky part is how do I know how much I want to move it up by so say I came on
Here and I said let’s move this up by like I want to move it up 100 pixels well it’s not gonna work because it’s not moving it up 100 pixels it’s moving it from the top down 100 pixels so that’s not working at all and then what
Happens if I want to take this and your re then I could go and like calculate the whole thing go it’s actually like 1 or I don’t know how tall this actually is but say 865 pixels let’s just see you know that’s actually we’re getting a little closer but it’s guesswork and
Then what happens if the content in this section changes and then the height of the whole thing changes which is bound to happen or your change your thing and well look at that my line already is going kind of weird the angle of it is changing as I’m moving around which is
Straight-up awkward so what we could do instead of having to worry about something like that is we could do some fun little stuff with this and so what I’m gonna do is instead of having a set number here or even you know I could put this at like 90% obviously and look it’s
Working but once again the angle of it keeps changing as I’m moving around like this it’s a very soft angle and then as I do this it gets to a steeper and steeper angle but what if I don’t want that angle to change I want that angle
Always to be the same so what I’m gonna do here is I’m actually gonna use the nice little calc CSS function and I’m gonna do 100% so it’s starting always where we originally had but then we’re going to subtract destroyed 20 viewport width and I’m purposely using width here
And not height because I want this number to change with the size of my screen so now yes the space is getting bigger but you notice the angle is always staying exactly the same isn’t that really cool that the angle is just matching the whole time so that’s really
Fun now the problem with that is I think it’s a bit too big so let’s bring that down to a ten so there we go we can see that the angle always stays the same it just sort of takes a larger truncated larger screen sizes which makes sense so
It’s just always gonna stay like that so it works really really well but I have the problem of having this empty space here so I’m going to just come on and that’s where having the negative so I’m going to do a margin bottom of negative ten viewport width and that’s gonna suck
The next section up into that empty space and that’s super cool because I know this this number here so this space that’s underneath is always ten viewport width so my margin bottom ten viewport width and it just sucks it up and it works perfectly so I think that’s really
Nice and handy for these types of sections where you might want to get these you know it’s kind of trendy to have sections that are off by a little bit just be careful again clip paths a browser support I’ll put a link to the can I use because it’s always updating
So I don’t want to show something on the screen now it might eventually you know if you find this video in six months it might be different but as of the time of this coming out it’s not terrible by any means it’s just not amazing
One thing I guess that could be good is if the clip path didn’t work in this case it doesn’t break my layout at all right like the site’s still working so again it is disgraceful degradation if a website does come on here the padding
Might be a little off so it might not be perfect but hey it’s not too bad so I hope you liked this video if you did please hit the thumbs up if you have any questions please leave a comment down below and if you curious but the newsletter that I mentioned pretty much
What I’m gonna be doing is I’ve already started it the first issue has gone out it’s gonna be a weekly newsletter every Sunday delivered to your inbox I’m looking at things like I did with this place items these sort of obscure little things that I fall upon that aren’t big in
To make actual videos out of you know something that I can’t expand long enough for its this is really cool thing that I want to share with people quickly things that I might include in my videos from time to time but I won’t actually build a whole video about so it’s sort
Of like these YouTube videos but my idea with them is that you can read them in an early three minutes so really not long but just to keep you up to date on these cool things that I’ve been finding and I’ll probably also be going into some design decision II stuff as well
Cuz I do get a lot of questions about how to make designs look nicer so on little tidbits and things that you could try to make your designs look better so a little bit of a combination of the two of them once again any information you might want for that is in the
Description below thank you so much for watching also thank you so much for my patrons for making this all possible and of course until next time don’t forget to make your corner the Internet just a little bit more awesome
Video Keywords: *, Kevin Powell,tutorial,html,css,css shapes,how to make shapes with css,how to create shapes with css,css only shapes,css clip-path,clip-path,css clip path,how to use pseudo elements,css pseudo element,css pseudo,css pseudo elements,css pseudo selectors,css clipping path,css clipping mask,css shapes tutorial
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Cool stuff!
شكراً جزيلاً لك
soo can we mix clip-path with cos and sin??
Please continue this series, doesn't matter if it's 5 minutes or 10 or 15, your choice, but bring these back
🙂
You videos are really worthy.Learnt so much and still learning.Thank you
Hey, Kevin! I just tried to make the diagonal shape between section 2 and 3 by pulling the up-right edge of section three up, avoiding to use the negative margin-bottom, however it doesn't work. Do you know why?
.three {
background: #5B5F97;
z-index: 10;
clip-path: polygon(0 0, 100% -20%, 100% 100%, 0 100%);
}
cool guy, calm voice, awesome code
The best Teacher ever!! I have seen a lot of your videos and I don't think anyone loves CSS more than you do : )
Kevin is my go to guy for CSS always!
Can i make a circle using polygon()?
🙌
Thank you, man! Helped a lot, i owe you a coffee
First time using code pen, that's a nice site. I added in a slow infinite animation and a transform rotate (100deg <-> 80deg) to make the smile move back and forth. Silly, but fun 🙂
I've been watching your videos for a few weeks now, makes me interested in web design again.
How long before I get this good, starting from zero?😮
Graceful degradation is the story of my life
I had to build the same first design for a website and I have a more easier way I used made a square with before and rotate is 45 degrees and take it to the bottom
Thanks man! I needed this!
This video is GOLD. Thank you, Kevin. We need these types of simplified videos more often.
Thanks for these wonderful videos.
Absolutely amazing information. I find clip-path fascinating to use in my design, it's just the browser support that keeps me from abusing it to form complex shapes.
Kevin, you are awesome! Congratulations on your incredible work and to being such a nice guy! 🙂
who is GOAT jen simmons or kevin powell.
such a lifesaver. thank you!
Thanks, Kevin! Very cool, and very helpful.
I learned so much in so little time, and I was not bored. I love your voice man (no homo of course).
Thanks for the tutorial!
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.
Very cool video. A++ Curious question. Where you demonstrated the angled page section boundaries, is there a way to cause the section boundaries to be arched up or down?
Awsome Thank you
Nice video, tnx 🙂 I made some stars with clip-path, but in firefox there is a thin border still visible.Did I miss something?
You are a very good teacher. In video you said why do they keep hyper link underline by default. They did that to differentiate between text and hyperlinks or else it will be difficult to differntiate.
Thank you so much for your way of teaching i really enjoy it .. Thank you
thank you bro 🙂
was i the only one laughing while watching this xd
nice presentation
Nice video sir, it helped me a lot. Thanks 👍👍
comment from terminal!