Tuesday, June 11, 2019

Make a triangle in CSS!

This has the following example.

.arrow-right {
   width: 0;
   height: 0;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
   border-left: 60px solid green;
}

 
 

Basically you spec a left, right, top, or bottom border to give a color to. If you spec left or right you need a transparent border for the top and the bottom and if you specify top or bottom you need a transparent border for the left and the right.

No comments:

Post a Comment