Analysis of the Principle of CSS triangle painting, css triangle painting

Analysis of the Principle of CSS triangle painting, css triangle painting

When learning Bootstrap today, we can see the following triangle source code of the button:

.caret {  display: inline-block;  width: 0;  height: 0;  margin-left: 2px;  vertical-align: middle;  border-top: 4px solid;  border-right: 4px solid transparent;  border-left: 4px solid transparent;}

I don't know how border works, so I want to explore it. I always use a rectangle as the border, as shown in the following code:

.border {  width:50px;  height:50px;  border: 2px solid;  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;}

When we increase the border value

.border {  width:50px;  height:50px;  border: 20px solid;  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;}

Obviously, the border of each side is a trapezoid.

Now let's think about it. We set both the length and width of the element to 0 PX, and the border value remains unchanged. We use the limit principle to explain that the border on each side will change from a trapezoid to a triangle, next we will use the code to test it.

.border {  width:0px;  height:0px;  border: 20px solid;  border-color: #ADFF2F #BA55D3 #F4A460 #FF0000;}

As expected, we get the following results:

Now we have an idea on how to draw a triangle: Set the border-color value of the border on the other three sides to transparent to get a triangle. For example

.border {  width:0px;  height:0px;  border: 20px solid;  border-color: #ADFF2F transparent transparent transparent;}

Let's look back at the. caret source code in Bootstrap. It seems different from what we imagined. When designing a downward triangle, the developer only sets the border value on the top left and right, and then sets the border-color of the border on both sides to transparent. Now we will not set border-color on both sides to transparent to see what kind of image is like.

.border {  width: 0;   height:0;  border-top: 40px solid #ADFF2F;  border-right: 40px solid #BA55D3;  border-left: 40px solid #FF0000;}

When no lower border is set, the lower half of the left and right sides of the border will be cut out. Here we should be able to fully understand the principles of bootstrap's. caret code.

However, our exploration is not over yet. With curiosity, we can test the following code:

.border {  width: 0;   height:0;  border-top: 40px solid #ADFF2F;  border-right: 40px solid #BA55D3;}

We only set the upper right border. The following result is displayed:

It seems a bit difficult to understand. If we test the following code, we should suddenly realize it.

.border {  width: 40px;   height:40px;  border-top: 40px solid #ADFF2F;  border-right: 40px solid #BA55D3;}

The above example shows a square because the height and width of the element are both 0, resulting in border shrinking to the part in the upper right corner.

Let's take a look at what will happen if we only set the two borders on the opposite side of the element.

.border {  width: 0;   height:0;  border-top: 40px solid #ADFF2F;  border-bottom: 40px solid #FF0000;}

The reason is that the browser does not display anything: Because the height and width of the element are both 0, and there is no intersection between the two sides of the border, it is bound to shrink to 0.