Тёмный

How (and why) to use borders to make a CSS triangle (plus a scss mixin) 

Kevin Powell
Подписаться 915 тыс.
Просмотров 38 тыс.
50% 1

It's a little strange that you can make a triangle by using a border with CSS, but once you understand why you can do it, it not only makes sense, but it's also a lot easier to manipulate so you can get them exactly like you might need them to be.
Not only do I look at how to make a css triangle with a border in this video, but also how it works, and I finish it off by looking at how you can use a Sass mixin to be able to create them with only one line of code, once you've set things up.
---
Come and hangout, ask questions, suggest ideas, and meet some awesome people over in The Community: / discord
I have a newsletter! www.kevinpowell.co/newsletter
New to Sass, or want to step up your game with it? I've got a course just for you: www.kevinpowell.co/learn-sass
---
My Code Editor: VS Code - code.visualstudio.com/
How my browser refreshes when I save: • How to automatically r...
---
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 RU-vid channel, make sure to follow me on Instagram and Twitter.
Instagram: / kevinpowell.co
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell

Опубликовано:

 

8 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 80   
@HostDotPromo
@HostDotPromo 5 лет назад
This is something I remember learning a long time ago, I forgot. Always good to brush back up on things, thanks man. 👍
@sebastianiuga3020
@sebastianiuga3020 4 года назад
Brilliant! Enthralled by the the way you're able to give a handle on these concept very quickly.
@kismatkc4245
@kismatkc4245 9 месяцев назад
Giving all of the sides a unique color and increasing the widths was a very clever idea to visualize this.I was really fraustrated looking for the explanation.Thank you so much for such informative content.
@SaleKnezevic
@SaleKnezevic 5 лет назад
Najs, two things in one video, learning about border manipulation and Sass. Great stuff :)
@makiaboabida
@makiaboabida 3 года назад
Yeah sass looks pretty cool
@mohan9285
@mohan9285 4 года назад
I was not using mixins more, but after watching this video I am getting love with the way mixins work and will write lot in coming projects. Cheers :)
@Shakas420
@Shakas420 5 лет назад
Thank you for this Kevin. I was trying to make a V shaped section in my portfolio site, and I got it to work but didn’t really understand it until now!!
@itspawanpoudel
@itspawanpoudel Год назад
3 years old course is far better than others 2022 course Thanks for this!
@amireshaghi4228
@amireshaghi4228 Год назад
Perfect Explanation
@pfever
@pfever 2 года назад
Man~ you really cover everything about CSS! You are definetly the best CSS youtube/instructor online :)
@sororbudwiser
@sororbudwiser 5 лет назад
Brilliant video as always, Kevin
@bikramchettri9405
@bikramchettri9405 5 лет назад
thanks kevin. clearly explained.
@michaeloosthuizen2383
@michaeloosthuizen2383 5 лет назад
Very well explained.
@thierryjacques222
@thierryjacques222 3 года назад
Thank you very much it was, as usual, really clear !!
@abigbiscuit
@abigbiscuit Год назад
great explanation, thanks
@devzorsmallz
@devzorsmallz 2 года назад
whoa okay, mixins are super cool. definitely using them.
@parasarora5869
@parasarora5869 5 лет назад
woww sir...it was superb!!...i used borders to make triangles but you really gave a boost to my knowledge. I will also create the mixin in my scss file😃
@npc73x
@npc73x 2 года назад
Thank you, this is wonderful
@adao5308
@adao5308 2 года назад
Thanks Kevin!
@guillermoalvarezdelacadena5110
@guillermoalvarezdelacadena5110 2 года назад
Helped me so much!!
@gersoncjunior
@gersoncjunior 3 года назад
Thanks a great explanation!
@DongQian
@DongQian 5 лет назад
thanks, I can see it will be very useful
@abdurasulyakubov6852
@abdurasulyakubov6852 5 лет назад
That was really great, thanks a lot!!!!!!!!
@ShadiMuhammad
@ShadiMuhammad 5 лет назад
Good Job Kevin. 👌 I like It. 😍
@EdgeQ
@EdgeQ 5 лет назад
Was literally JUST going through a project that uses border triangles when I thought "Man, I wish Kevin Powell had a video about this..." ... and here we are. Thanks!
@KevinPowell
@KevinPowell 5 лет назад
Nice timing :D
@jv18creator
@jv18creator 3 года назад
Thank you so much
@saifeddine6479
@saifeddine6479 3 года назад
Love the videos
@atom8926
@atom8926 2 года назад
Brother you are God in CSS. Accept my respect for you. Bow Down Hand Up
@suvodipmondal1858
@suvodipmondal1858 5 лет назад
This is really cool
@natqe4049
@natqe4049 5 лет назад
very good video!!
@dawatcherz
@dawatcherz 2 года назад
i was struggling with this today as i was making a breadcrumb thingy and this explanation really helps me understand it. i also am very glad to find out how to use variables before the : even though i cannot think of an example of where else to use it, i am sure this will come in very handy.
@A_Lesser_Man
@A_Lesser_Man 5 лет назад
Coolness. now i can add this to my chat panel.
@abirkulov
@abirkulov 5 лет назад
Good tutorial )
@gamepills1276
@gamepills1276 3 года назад
U r true creator ❤️
@TheStillhonest
@TheStillhonest 5 лет назад
thanks :)
@anurocksification
@anurocksification 5 лет назад
Great Video Sir, Very helpful !.Just one question: You mentioned in a previous video that pseudo selectors are display:inline by default.But you aren't changing the display property to block or inline-block.How is the width and height being applied then ?
@KevinPowell
@KevinPowell 5 лет назад
As soon as I put a position: absolute on it, it allows me to make to set a height and width. I believe that giving it position: absolute actually forces it to be a block, instead of inline element.
@yofi2614
@yofi2614 2 года назад
Correct me if im wrong but, if i use ::after/::before cause i wanna add a shape, not a text, i have to add the property position and content unless i would not see the shape even if i gave it dimension, right?
@parahumanoid
@parahumanoid 3 месяца назад
nice. does anyone know if it is at all possible to applya gradient to a single border (without having other borders zero-width: else we'd lose the triangle shape)? I wrecked my brain over this yesterday, but so far to no avail.
@buby84
@buby84 3 года назад
Is It bad if I use rotate 45 and 2 border ? So inner part can be transparent too
@joe-un1ky
@joe-un1ky 5 лет назад
Sass is magical
@samkeen
@samkeen 5 лет назад
Thanks for the vid, but I was hoping to hear more of the ‘why’ of using borders. Do you think borders would be better than using clip-path?
@KevinPowell
@KevinPowell 5 лет назад
borders have better support than clip-path, so yes :). I think using an SVG is a great choice. The 'why', which I admittedly didn't talk about enough, is the easy of making changes to them. If all your triangles will look the same, there probably isn't a reason... but if you need one on the fly and quickly, it's nice and easy, and if you need some that are different orientations or 'shapes' (long, short, etc), it might be the easiest to change on the fly compared to clip-path and svgs.
@samkeen
@samkeen 5 лет назад
Kevin Powell thanks for the reply, I appreciate it :)
@kevinrutledge9602
@kevinrutledge9602 3 года назад
I’m hoping I can take this and adapt to use in my vue app to create something that looks like a Christmas tag for our church to replace a traditional Christmas tree program.
@kevinrutledge9602
@kevinrutledge9602 3 года назад
For now I think I will pick through this code pen and see if I can understand what everything is doing. codepen.io/laurenashpole/pen/zoMyQj
@frankdelange1122
@frankdelange1122 5 лет назад
interesting...but how about using an iconfont for this kind of thing? what would be the advantage of doing it like you do?
@KevinPowell
@KevinPowell 5 лет назад
I'd say it really depends on how you are using them. I wouldn't want to load in a full icon font just to use a triangle, but if you had a large amount of icons it could be worth it.
5 лет назад
OH MY!
@itsinternational6011
@itsinternational6011 2 года назад
7:23 :How did you write that shortcut?
@wejesuss-1104
@wejesuss-1104 3 года назад
what if I want unfilled triangles?
@0xDEAD_Inside
@0xDEAD_Inside 3 года назад
I am wondering why didn't you use ::before and used ::after?
@raptisj
@raptisj 5 лет назад
Dope. I'm curious if there is any cool animation use with this..
@TheProDat
@TheProDat 5 лет назад
Nope
@KevinPowell
@KevinPowell 5 лет назад
I don't know how practical the stuff you can do would be, but I just threw this together really fast. I'm sure with some though, you could do something a bit better :) - codepen.io/kevinpowell/pen/0c123439a60a1d5a96e5d9c55f4bc6fc
@ck0024
@ck0024 5 лет назад
*Please make a video on Perspective, Preserve-3D*
@KevinPowell
@KevinPowell 5 лет назад
This might be what you are looking for :) ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FeJEEE3zc4U.html
@Kenshinwtw
@Kenshinwtw 11 месяцев назад
based thank you
@leolowe22
@leolowe22 4 года назад
how is the intersection of all these four border working in crux? How is it able to make a triangle
@KevinPowell
@KevinPowell 4 года назад
Because they intersect at a 45deg angle. So when they are touching on two sides, it makes a triangle.... it's kind of hard to explain with words, lol.
@leolowe22
@leolowe22 4 года назад
Kevin Powell yah got u thanks, cleared my doubt, its like each of these borders telling to each other, that why to overlap when we can show brother hood and divide it equally 🤣🤣
@TheDexter89
@TheDexter89 5 лет назад
For small icons I use triangle css. But when big triangle come for dividing a section I choose clip path
@KevinPowell
@KevinPowell 5 лет назад
Yup, clip-path works great, specially for something like you mentioned.
@gamersylum3674
@gamersylum3674 4 года назад
Hey Kevin I m from India. Kevin are u a front-end developer? One more do u do remote work or in company?
@KevinPowell
@KevinPowell 4 года назад
I'm a teacher actually :)
@gamersylum3674
@gamersylum3674 4 года назад
@@KevinPowell teacher? In college or what?
@KevinPowell
@KevinPowell 4 года назад
@@gamersylum3674 vocational training center, so adults.
@eddybobea6709
@eddybobea6709 3 года назад
I came here through the King of CSS challenge... and borders and triangles somehow better be related to half of a square... XD
@makiaboabida
@makiaboabida 3 года назад
The video is 2 years old is there a newer better approach to making shapes or is this still relevant
@Nashiuz
@Nashiuz 2 года назад
Good video but it would help if the intro speech is a lot less
@thetruedarksoul168
@thetruedarksoul168 5 лет назад
This is cool and all... But dont let this distract you from the fact that APEX LEGENDS revived EA.
@hexoter
@hexoter Год назад
When you realize you know 0 css 😂
@joepexel2543
@joepexel2543 2 года назад
I just realized that you look like Elon Musk :)
@joan-qf4hf
@joan-qf4hf 3 года назад
There is lot of eco in your sound
Далее
Happy Holidays! [ speed coding ]
13:15
Просмотров 4,8 тыс.
Can you beat me at a CSS Battle?
49:42
Просмотров 357 тыс.
1❤️#thankyou #shorts
00:21
Просмотров 18 млн
calc() lets you do some real CSS magic
11:54
Просмотров 179 тыс.
Sass and BEM for beginners
3:45:10
Просмотров 237 тыс.
Learn CSS Subgrid in 14 minutes
14:19
Просмотров 52 тыс.
Using CSS Position Absolute: some practical examples
26:18
I Challenged The CSS King To A CSS Battle
37:45
Просмотров 1,3 млн
This is the hardest CSS Battle I've tried
1:27:43
Просмотров 106 тыс.