Transforming Borders into Cool CSS Triangles Quick Tutorial

>> YOUR LINK HERE: ___ http://youtube.com/watch?v=QY7Rj8aZcZk

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/bv... • 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: • How to automatically refresh your bro... • --- • Support me on Patreon: / 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: / kevinpowell.co • Twitter: / kevinjpowell • Codepen: https://codepen.io/kevinpowell/ • Github: https://github.com/kevin-powell

#############################

New on site