# pure CSS triangle principle analysis Do a page before because there are many triangles, start with pictures directly feeling is not very good with, watching always very strange color is difficult to adjust the same as the background, the search is a wave directly using the code, after thought for a moment feel don’t know what specific principle, wondered why borders can set the style of the triangle. So I went through a wave and sorted it out as follows

1. What does the border look like?

Because very thick borders are rarely used, and 90% of the time we use one color for borders. So I realized THAT I didn’t know what a border looked like, and for a long time I thought all four edges were a line (don’t tell me I’m the only one).

I did a little experiment and found that when the borders got thicker and thicker, it was obvious that each edge was a trapezoid

2. How to make a triangle?

Because all the code I’ve been looking at before says width: 0; height: 0; I didn’t understand why at the time, but now it’s easy to think, using limit thinking, that as the content size approaches zero, each side is a triangle.

At this point you can see that the triangle is already there, and all we have to do is make the other sides transparent and we have the triangle that we want.

3. Is there anything more?

By removing the border separately, we found the following:

  • When you cancel an edge, the contact between the two edges adjacent to the edge becomes straight
  • When there are only adjacent sides, the two sides become an opposable triangle
  • When there is no other contact on the reserved edge, in the limit everything disappears.

4. Develop

Now that you know that, does it feel pretty clear when you look at the code? And then we can make more triangles. With these shapes and the rotation property, almost any scene can be used.

Right-angled triangle

.box {
    /* Internal size */
    width: 0px;
    height: 0px;
    /* The border size is set to only three edges */
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-left: transparent solid;
    border-width: 85px; 
    /* Other Settings are optional */
    margin: 50px;
}
Copy the code

Smaller right triangles

Using the opposite side to make a smaller right triangle

.box {
    /* Internal size */
    width: 0px;
    height: 0px;
    /* The border size is set to only two edges */
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px; 
    /* Other Settings */
    margin: 50px;
}
Copy the code

Isosceles acute triangle

Various triangles can be made by changing the length of the base

.box {
    /* Internal size */
    width: 0px;
    height: 0px;
    /* Border size */
    border-top: #4285f4 170px solid;
    border-right: transparent 85px solid;
    border-left: transparent 85px solid;
     
    /* Other Settings */
    margin: 50px;
}
Copy the code

Speech bubbles

By setting the pseudo-elements into triangles and positioning them, you can create a classic dialogue bubble.

.bubbly {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(50%, 50%);background: #00ccbb;
    border-radius: 8px;
    width: 200px;
    padding: 40px 10px;
    text-align: center;
    color: white;
    font-size: 20px;

.bubbly:after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 50%;
    border: 34px solid transparent;
    border-top-color: #00ccbb;
    border-bottom: 0;
    border-left: 0;
    margin: 0 0 -34px -17px;
}
Copy the code

conclusion

By setting the length of the four sides, you can also make a variety of triangles, almost any triangle shape can be set. In addition, you can set the shape of the body by setting one of the width and height to 0 and the other one not to 0, so you can experiment freely