Analysis of the principles of drawing triangles with CSS_html/css_WEB-ITnose

The border we have always thought of is roughly as follows:

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

The effect is as follows:

However, when we increase the value of border, we will see the following effect

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

The effect we will see is as follows:

We will find that the border becomes a trapezoid.

If we set the width and height to 0, due to the limit principle, the trapezoid will become a triangle, look at the code below

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

We will see To the following effect:

Now we have an idea on how to draw a triangle: set the border-color value of the other three sides of the border to transparent, that is A triangle can be obtained. For example,

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

The effect is as follows:

When designing the downward triangle, the developer only set the upper left and right borders value, and then set the border-color of the left and right borders to transparent. Let's first set the border-color on the left and right sides to transparent to see what the shape looks like.

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

It turns out that when the bottom border is not set, the left and right borders will cut off the bottom half. At this point we should be able to fully understand the principle of bootstrap's .caret code.

But our exploration did not end here. With curiosity, we tested the following code:

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

We only set the upper right The border, we get the following results:

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

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

It turns out that the above example is displayed as a square because the height and width of the element are both 0, which causes the border to shrink to the upper right corner.

Let’s take a look and see what happens if we only set two borders on the opposite sides of the element.

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

The browser displays nothing. Analyze the reason: because the height and width of the element are both 0, and the two opposite borders do not intersect, it must shrink to 0.

Finally, let’s look at an application example:

<span style="white-space:pre"></span>#demo {      width: 200px;      line-height: 100px;      background-color: #fff;      position: relative;      border: 1px solid #5BBF5A;      text-align: center;      font-size: 25px;  }  #demo:after, #demo:before {      border: solid transparent;      content: ' ';      width: 0;      height:  0;      position: absolute;  }  #demo:after {      border-width: 10px;      border-top-color: #fff;      top: 100px;      left: 150px;  }  #demo:before {      border-width: 11px;      border-top-color: #5BBF5A;      top: 100px;      left: 149px;  }  

The effect is as follows:

The principle of its implementation is very simple, that is, two superposition of triangles.