DEV Community

Cover image for Learn how to make a Triangle in CSS once and for all
Adrian Twarog
Adrian Twarog

Posted on

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

Want to see more:

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

Top comments (5)

Collapse
 
astrit profile image
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.
✌🤘

Collapse
 
syashakash profile image
Akash Shivram

This is a great trick.

Collapse
 
adriantwarog profile image
Adrian Twarog

Good to hear :)

Collapse
 
pablowbk profile image
Pablo

Thanks! My brain just wont keep this data in storage

Collapse
 
adriantwarog profile image
Adrian Twarog

Oh I know the feeling!