Pure css game triangle

Pure css game triangle

In the era where css3 is prevalent, canvas, svg, linear-gradient, and radio-gradient can be used to draw a variety of images.

But as early as the css2 era, triangle painting is nothing new. Here is a brief summary for your convenience.

 

Write a general structure,

        .triangle-up {            width: 0;            height: 0;            border-top: 50px solid transparent;            border-left: 100px solid red;            border-bottom: 50px solid transparent;        }

If the style is written in this way, because border-right is not set, the triangle points to the right. Let's take full advantage of the space imagination and draw a picture on the paper.

If you want to use a triangle to point up, you only need not set border-top.

#triangle-up {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-bottom: 100px solid red;}

Likewise:
Triangle minus left:

#triangle-left {    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 100px solid red;    border-bottom: 50px solid transparent;}

Triangle down:

#triangle-down {    width: 0;    height: 0;    border-left: 50px solid transparent;    border-right: 50px solid transparent;    border-top: 100px solid red;}

Of course, if I set border-top to 100px red and border-left to 100px transparent, it will get a tip effect:

#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent;}

In this way, you can set four directions. The same principle.