Making triangle principle with border

In the front page of the website, sometimes some triangles are used, in addition to the way the image is used, the border property of the CSS can also make the corresponding triangles. So, how to make use of border to achieve the production of triangles?

Let's take a look at the following example:

CSS code:

  width:100px;  height:100px;  Border-top:solid 100px Blue;  Border-left:solid 100px Black;  Border-right:solid 100px Yellow;  Border-bottom:solid 100px Red;

Operation Result:

By displaying the result you can see that the border intersection is formed in 45° evenly, then, when the width of the element is set to 0, what will it look like?

Code:

  width:0;  height:0;  Border-top:solid 100px Blue;  Border-left:solid 100px Black;  Border-right:solid 100px Yellow;  Border-bottom:solid 100px Red;

Operation Result:

In this way, we see four equilateral triangles. So, what do we want to do with a triangle? Imagine what it would be like if we removed an edge.

Code:

  width:0;  height:0;  Border-left:solid 100px Black;  Border-right:solid 100px Yellow;  Border-bottom:solid 100px Red;

Operation Result:

This time, we see three triangles, if we change the black and yellow to transparent, will there be a red equilateral triangle?

Code:

  width:0;  height:0;  Border-left:solid 100px Transparent;  Border-right:solid 100px Transparent;  Border-bottom:solid 100px Red;

Operation Result:

Obviously, the triangle appears. We can try to modify the width of the border or hide the other edges, we can get a different triangle.

Code:

  width:0;  height:0;  Border-left:solid 100px Transparent;  Border-right:solid 100px Transparent;  Border-bottom:solid 50px Red;

Operation Result:

Code:

  width:0;  height:0;  Border-top:solid 100px Transparent;  Border-bottom:solid 100px Transparent;  Border-left:solid 150px Black;

Operation Result:

Code:

  width:0;  height:0;  Border-top:solid 100px Transparent;  Border-left:solid 150px Black;

Operation Result:

Summary: Can be removed by removing one or two borders, set the corresponding border transparent, to achieve the production of triangles, can be varied, more examples are no longer enumerated.