CSS implementation code for drawing triangles (border method)

1. Implement a simple triangle

Using the border in the CSS box model, you can achieve a triangle like the following:

CSS to achieve a simple triangle

Implementation principle:

First, let's look at what border looks like when adding border to an element; assuming there is the following code:

<div></div>

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

Effect picture:

Common uses of border

This is the most common case when we use borders in our daily lives - we often only give the border a small width (usually 1-2px); however, such daily usage can easily lead to misunderstandings about how borders are formed, that is, people think that the border of an element is composed of four rectangular borders.

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

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

Effect picture:

How border is formed

So what happens if we go a step further and set the content size of an element to 0?

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

Effect picture:

The element content size is 0

We will be surprised to find that at this time the element is "spliced" by four triangles: up, down, left and right; so, in order to achieve the final effect, that is, to keep the bottom triangle, what should we do? It's very simple, we just need to set the color of other border edges to white or transparent :

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

Final result

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

However, the "hidden" upper border still occupies space. To minimize the size of the drawn triangle, you also need to set the width of the upper border to 0 (the same applies to other cases):

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

2. Implementing a triangle with a border

A bordered triangle is a triangle with a border of another color, just like adding a border to an element:

Triangle with border

Since we can't continue to set the border for the existing triangle by setting the border for it (because the triangle itself is implemented using the border), we have to find another way. The most natural way to do this is to stack triangles , that is, stack the current triangle on top of a larger triangle. The implementation method shown in the figure above is to place the yellow triangle on top of the larger blue triangle.

In order to achieve this effect, you need to use the absolute positioning method:

First define the outer blue triangle:

<div id="blue"><div>

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

The effect is:

Outer blue triangle

Then you need to define the yellow triangle. Since the positioning of the yellow triangle needs to refer to the position of the blue triangle, you need to use the absolute positioning method. To do this, you also need to make the yellow triangle a child element of the blue triangle. One possible solution is to define an additional tag inside the blue triangle to represent the yellow triangle, but in order to save tags, a better solution is to use a pseudo-element :

#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;
}

The result is:

Define the yellow triangle

Pay special attention to the offset between the yellow triangle and the blue triangle. This offset is affected by top , left (in this case), and the width of the yellow triangle's border.

You may have such a question: Why is the yellow triangle offset to the left for a certain distance? Shouldn't it completely overlap with the blue triangle, like this?

The yellow triangle completely overlaps with the blue triangle

If you have such doubts, it means that you do not have enough understanding of absolute positioning. The absolutely positioned area is based on the padding area of ​​the absolutely positioned parent element , and then a series of attributes such as top , left , right , bottom , etc. are used on this basis to constrain the position of the absolutely positioned child elements. In this example, since the blue triangle is an absolutely positioned parent element and the size of its content is 0, the content area is the upper vertex of the triangle:

Absolute positioning area

For the yellow triangle, since left: 0 and top: 0 are set, all the contents of the yellow triangle (including border and margin) will be positioned according to the upper vertex of the blue triangle. At this time left: 0 and top: 0 can be regarded as two "partition walls" respectively - the upper partition wall and the left partition wall. All the contents of the yellow triangle can only be below the upper partition wall and to the right of the left partition wall.

Since the content area of ​​the yellow triangle is also located at its vertex and a 40px border is set on the left and right, the content area of ​​the yellow triangle will be offset 40px to the right, thus forming the previous effect.

Think about what kind of positioning effect you will get if you set the position of the yellow triangle to left: 0 and bottom: 0 ? (As shown in the figure below)

The yellow triangle is set to left: 0 and bottom: 0

After understanding absolute positioning, you only need to make slight modifications to the original code to make the vertices of the yellow triangle coincide with the vertices of the blue triangle. At the same time, you should also appropriately reduce the size of the yellow triangle (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;
}

get:

The yellow triangle and the blue triangle have the same vertices.

In the above code, the previous settings of width: 0 and height: 0 are deliberately deleted because the child element has position:absolute setting, which will cause the element size to shrink to the size of the element content without explicitly setting the width and height. Since the content is set to content: "" , the size of the child element is 0 by default. Therefore, setting width: 0 and height: 0 becomes redundant.

The last 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;
}

Get the final effect:

Final result

Now that you have learned how to draw a triangle with a border, it is no problem to implement a triangle arrow like the following:

Triangle Arrow

Implementation code:

#blue:after {
    content: "";
    position: absolute;
    top: 2px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent #fff;
}

3. Draw triangles with other angles

Draw triangles with other angles, such as:

Right triangle

or:

Left right triangle

It's even simpler, in fact, they are all based on the triangles drawn before. If you want to draw a right right triangle, set the left border to 0; if you want to draw a left right triangle, set the right border to 0 (the same applies to other situations).

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.