Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

How to create CSS Triangle

How to create CSS Triangle

Dhairya Shah's photo
Dhairya Shah
ยทSep 5, 2022ยท

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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;
}

image.png

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!

ย 
Share this