Classic interview question: How to draw a triangle using CSS?

Article directory

I. Introduction

2. How to achieve it?

1. Realize a simple triangle

2. Realize the hollow triangle

three. summary

---

I. Introduction

 During front-end development, we sometimes need to use a triangle shape, such as address selection or the play button in the player,

Usually, we will use pictures or svgto complete the triangle renderings, but csshow to complete a triangle if we only use it?

The implementation process does not seem to be difficult, it can be completed through the border

 

2. How to achieve it?

1. Realize a simple triangle

Preliminary knowledge: When the width and height of block-level elements are both 0, and only the border is set, a cube will be formed. The specific implementation is as follows

            div {
                width: 0;
                height: 0;
                border: 50px solid red;
            }

The effect is as follows

 In essence, the upper, lower, left, and right borders are all triangles, so we display the triangle we want and hide the triangles in the other three directions.

If we want to keep the upper triangle

            div {
                width: 0;
                height: 0;
                /* 排他思想，给全部的边框设置为透明 */
                border: 50px solid transparent;
                /* 单独给你想要的三角形设置样式 */
                border-top: 100px solid red;
            }

The effect is as follows

2. Realize the hollow triangle

   If you want to realize a triangle with only a hollow border, since borderattributes can no longer be used here, the most direct way is to use a pseudo-class to create a smaller triangle and locate it

(1). When adding a pseudo-class to the div, use absolute positioning to initially position left: 0 right: 0, and then adjust it later

            div {
                width: 0;
                height: 0;
                border: 50px solid transparent;
                border-bottom: 50px solid red;
                position: relative;
            }
            div::after {
                content: '';
                border: 40px solid transparent;
                border-bottom: 40px solid green;
                position: absolute;
                top: 0px;
                left: 0px;
            }

Now the initial effect is as follows

(2). Then adjust the position of the pseudo-class element (green triangle) and set the border-bottom color to white to achieve the hollow effect in the middle

code show as below

            div {
                width: 0;
                height: 0;
                border: 50px solid transparent;
                border-bottom: 50px solid red;
                position: relative;
            }
            div::after {
                content: '';
                border: 40px solid transparent;
                /* 将伪类元素的三角形设置为白色，达到空心的效果 */
                border-bottom: 40px solid white;
                position: absolute;
                /* 调整伪类元素的位置 */
                top: -34px;
                left: -39px;
            }

The final effect achieved is as follows

 

three. summary

Above we have realized the two methods of drawing triangles with css, and we should also encounter them in actual development. We can not only use the font icon library to meet the requirements, but we can also use the original css to achieve the requirements.