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.