1. Implement a simple triangle

Use the border in the CSS box model to create the following triangle:

Implementation principle:

First, look at what the border looks like when you add a border to the element. Assume the following code:

<div></div>

div {
    width: 50px;
    height: 50px;
    border: 2px solid orange;
}
Copy the code

Effect:This is the most common way we use a border — we tend to give the border a small width (usually 1-2px); However, this common usage can lead to a misunderstanding of how a border is formed, i.e. an element border is made up of four rectangular borders.

However, this is not the case. In fact, the border of the element is a combination of triangles. To illustrate this, we can increase the width of the border and set different colors for each border:

div {
    width: 50px;
    height: 50px;
    border: 40px solid;
    border-color: orange blue red green;
}
Copy the code

Effect:In that case, what happens if you take it one step further and set the element’s content size to 0?

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: orange blue red green;
}
Copy the code

Effect:

To our surprise, the element is made up of four triangles, top, bottom, right, and left. So, what else should I do to achieve the final effect, which is to preserve the bottom triangle? Simple, we just need to set the color of the other border to white or transparent:

div {
    width: 0;
    height: 0;
    border: 40px solid;
    border-color: transparent transparent red;
}
Copy the code

Duang~ The final simple triangle is drawn. Similarly, if you want to get triangles on other sides, just set the remaining border color to white or transparent.

However, the “hidden” top border still takes up space, and to minimize the size of the drawn triangle, you also need to set the width of the top border to 0 (the same applies elsewhere) :

div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}
Copy the code

2. Implement triangles with borders

A border triangle is a triangle with a border of another color, just as you would an element with a border:

Since you can’t continue to border an existing triangle by setting a border (because the triangle itself is implemented using a border), you have to find another way. One of the most natural ways to do this is by placing the current triangle on top of the larger triangle, as shown above by placing the yellow triangle on top of the larger blue triangle.

To achieve this effect, we need to use the absolute positioning method: first define the blue triangle on the outside:

<div id="blue"><div>

#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}
Copy the code

Results as follows:

Then we need to define the yellow triangle, because the location of the yellow triangle needs to refer to the location of the blue triangle, so we need to use the absolute location method. To do this, you also need to make the yellow triangle a child of the blue triangle. One possible solution is to define an extra label inside the blue triangle to represent the yellow triangle, but for the sake of saving labels, it is better to use pseudo-elements:

#blue:after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent yellow;
}
Copy the code

The result is:

Special attention should be paid to the offset relationship between the position of the yellow triangle and the blue triangle defined at this time, which will be affected by the joint width of top, left (in this case) and the border width of the yellow triangle itself

You might wonder: Why does the yellow triangle shift a little to the left? Shouldn’t it be perfectly on top of the blue triangle, as follows?

If there is such a doubt, it shows that there is not enough understanding of absolute positioning. The absolute location of the area is based onAbsolute location of the parent elementpaddingareaAnd then build on thattop,left,right,bottomAnd a series of attributes to constrain the position of absolute positioning child elements. In this case, since the blue triangle is the absolute positioning parent and its content size is 0, the content area is the top vertex of the triangle:

For the yellow triangle, since left: 0 and top: 0 are set, all contents of the yellow triangle (including border and margin) will be positioned according to the top vertex of the blue triangle. In this case, left: 0 and top: 0 can be considered as two “partitions” — the upper partition and the left partition. All contents of the yellow triangle can only be located below the upper partition and to the right of the left partition.

Since the content area of the yellow triangle is also at its apex and is border 40px to the left and 40px to the right, the content area of the yellow triangle will be shifted 40px to the right, resulting in the same effect as before.

Imagine what happens if you set the yellow triangle positions to left: 0 and bottom: 0. (As shown below)

Once you understand the absolute positioning, you only need to make a few changes to the original code to overlap the vertices of the yellow triangle with the vertices of the blue triangle, and you should also reduce the size of the yellow triangle appropriately (in proportion to similar triangles) :

#blue:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}
Copy the code

Get:

In the above code, we deliberately removed the previous width: 0 and height: 0 Settings, because the child element has position: Absolute, which shrinks the element size to the content of the element without explicitly setting the width and height. “, so the size of the child element is 0 by default. So setting width: 0 and height: 0 becomes redundant.

The final step is to use top to move the yellow triangle down to the appropriate position

#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}
Copy the code

Get the end result:

If you know how to draw a triangle with a border, it’s easy to implement a triangle arrow like this:

Implementation code:

#blue:after {
    content: "";
    position: absolute;
    top: 2px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent #fff;
}
Copy the code
  1. Draw other angles of the triangle

Draw a triangle with other angles, such as:

or

It’s even easier, because they’re all based on the triangles that we drew before. If you want to draw a right triangle, set the left border to 0; If you want to draw a left right triangle, set the right border to 0 (do the same for other cases).