The basic idea to draw a triangle using pure CSS is using border of a box with zero height and width. Let’s see the code below.
/* CSS Code */
.triangle {
height: 0;
width: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
border-right: 100px solid red;
} Using the basic idea, in the above code example, we have kept the width and height as zero, where the top and bottom borders are transparent and then the right border will be responsible to display the triangle in red color. You can event toggle them by having any two of the borders as transparent and the other border with a random color. Give a try.