Foreword: The most common way to realize triangles on the Internet is to control borders, so why is it possible?
principle
Let's first take a look at the form of border.
box{
width:100px;
height:100px;
background:yellow;
border-top: 20px solid red;
border-right:20px solid black;
border-bottom:20px solid green;
border-left:20px solid blue;
}
Observing the above figure, it can be found that the border is trapezoidal. When reducing the width and height of the box, the following changes will occur:
It is easy to see from the above figure that when the width of the box is reduced to a very small value, that is, the upper edge of the trapezoid of the border is reduced to a very small value. So think about it, when this value drops to 0, the border becomes a triangle. As shown below:
So we can get the desired triangle by setting the element width and height to 0 and controlling the border.
accomplish
Setting borders that do not require orientation to transparent can be used to implement triangles. For example, if you want to achieve a lower triangle, you can set border-left, border-bottom, and border-right to transparent.
copy code
box{
width:0px;
height:0px;
border-top: 20px solid red;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid transparent;
}
box{
width:0px;
height:0px;
border-top: 20px solid red;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid red;
box{
width:0px;
height:0px;
border-top: 60px solid red;
border-right:20px solid transparent;
border-bottom:0px solid transparent;
border-left:20px solid transparent;
}
box{
width:100px;
height:100px;
border-top: 60px solid red;
border-right:20px solid transparent;
border-bottom:0px solid transparent;
border-left:20px solid transparent;
}
Not to list them one by one, as long as you understand that the border in each direction is a triangle, you can obtain various triangles and trapezoids by adjusting the size and color/transparency of the border.