Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

draw

In project development, we may encounter the need for a triangle style, although we can use images instead, but it is more elegant to write in code.

The container

<div class="triangle"></div>
Copy the code

To draw a triangle, we need to prepare a div element, and then it will be transformed.

style

People rely on clothes horse saddle, different styles in the shape of change. Draw the triangle style using the border property, giving one side a specific color and the other sides a transparent color.

Isosceles triangle up

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-left:var(--bw) solid transparent;
    border-right:var(--bw) solid transparent;
    border-bottom:calc(var(--bw) * 2) solid red;
}
Copy the code

Isosceles triangle pointing downwards

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-left:var(--bw) solid transparent;
    border-right:var(--bw) solid transparent;
    border-bottom:calc(var(--bw) * 2) solid red;
}
Copy the code

Isosceles triangle to the left

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-top:var(--bw) solid transparent;
    border-bottom:var(--bw) solid transparent;
    border-right:calc(var(--bw) * 2) solid red;
}
Copy the code

Isosceles triangles go to the right

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    border-top:var(--bw) solid transparent;
    border-bottom:var(--bw) solid transparent;
    border-left:calc(var(--bw) * 2) solid red;
}
Copy the code

These are isosceles triangles. We change the direction of the triangle by changing the color of the border. The shape of the triangle can be changed by changing the width of the border.

Isosceles right triangle

.triangle{
    width: 0;
    height: 0;
    --bw:100px;
    
    /* Right Angle upper left */
    border-bottom:var(--bw) solid transparent;
    border-left:var(--bw) solid red;
    
    /* or right-left lower */
    border-top:var(--bw) solid transparent;
    border-left:var(--bw) solid red;
    
    /* or right-upper */
    border-bottom:var(--bw) solid transparent;
    border-right:var(--bw) solid red;
            
    /* or right Angle lower */
    border-top:var(--bw) solid transparent;
    border-right:var(--bw) solid red;
}
Copy the code

Since it’s an isosceles right triangle, there are two ways to write each of these patterns, and I’ve only written one here, but if you want to rotate from one to the other, you can do it. These are common shapes in the project, and if you change the width of the border the shape will also change.

conclusion

  1. Isosceles triangles are created by giving a specific color to one side and a transparent color to the adjacent sides.

  2. Right triangles are created by giving a specific color to one side and a transparent color to one of the adjacent sides.

  3. Changing the width of the border changes the shape.

For other animation effects, head over to the Funny Animation column, which I hope will help you.