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

Adrian Twarog - Feb 18 '20 - - Dev Community

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 :)

Want to see more:

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

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .