How to create CSS Triangle

How to create CSS Triangle


1 min read

In this article, I will show you the simple way to create a triangle with CSS.

Let's go!

To create a triangle first, create a div:

<div class="triangle"></div>

Now it's time to show some of the powers of CSS:

.triangle {
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-top: 0;
  border-bottom: 200px solid black;


You have made the triangle. ๐ŸŽ‰

If you're interested in checking the live version, check out the following CodePen:

Thanks for reading

Follow me on Twitter

Thanks for reading!