How To Create A Triangle in CSS

Introduction

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:

See the Pen by Dhairya Shah (@dhairyathedev) on CodePen.

Thanks for reading

Follow me on Twitter

Thanks for reading!