Learn how to make a Triangle in CSS once and for all

Warning: This is a new format of content that I tried to make which is very fast hopefully engaging.

CSS triangles always frustrate me because I seem to always have to google how to make them every time I plan to add one. So I've made a video to both teach myself (and hopefully you) how to do it once and for all.

In this video I cover:

• Fun and fast (hopefully enjoyable) format
• 3 properties a CSS triangle is made of
• Explaining how to make a CSS triangle go a certain direction
• Some examples of CSS triangles
• Making more complex triangles with CSS

.css-triangle {
  height:0px;
  width:0px;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  border-left:50px solid red;
}

For more information, please watch the video and tell me what you think about this sort of format. Thanks!!!

Follow and support me:

Special thanks if you subscribe to my channel :)

• Youtube
• Patreon
• Twitter

Want to see more:

I will try to post new great content every day. Here are the latest items:

• Full Tutorial on how to use SASS to improve your CSS
• 4 Simple CSS Hover Transitions for your Elements Background
• How to implement Dark Mode with CSS new media call: prefers-color-scheme
• Creating a Mobile Design and Developing it

Comments

[Astrit]

I loved your tutorial and also inspired me to write one in my own much less advanced on how to make a outlined triangle using only borders.
✌🤘

[Akash Shivram]

This is a great trick.

[Adrian Twarog]

Good to hear :)

[Pablo]

Thanks! My brain just wont keep this data in storage

[Adrian Twarog]

Oh I know the feeling!