How to draw a triangle with CSS
1 Introduction
During a front-end interview of a blogger, I was asked how to draw a triangle with CSS? I believe that many friends have also been asked this question in the interview, and there are many solutions to this problem on the Internet, most of which are implemented using borders. After searching, I found that there are many specific implementation codes. But there are almost no implementation principles (or maybe I didn't find them). Below, I will talk about the principles of using borders to draw triangles.
2. Principle
2.1 The first step
First, come to a div, then add a layer of border to this div, and add different colors to the upper, lower, left, and right borders for observation. The code and effects are as follows:
.trangle{
width: 100px;
height: 100px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
<div class="trangle"></div>
2.2 The second step
Next, change the width of this div to 0, let's see the effect again. As you can see, since the width of the div has become 0, the borders on the left and right sides are "sucked" together, and the upper and lower borders have become triangles, which seems to be almost completed. Don't worry, let's look at the third step.
.trangle{
width: 0px;
height: 100px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
<div class="trangle"></div>
2.3 The third step
Then, change the height of this div to 0, the effect is as follows. We can see that since the height of the div has also become 0, the upper and lower borders are also "sucked" together, and the upper and lower borders have also become triangles. Up to now, the four triangles have come out.
.trangle{
width: 0px;
height: 0px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: yellow;
border-left-color: blue;
border-right-color: green;
}
<div class="trangle"></div>
2.4 Fourth step
Finally, it depends on which corner you want, which corner you want, just set the remaining three borders to be transparent. For example, if I want the uppermost triangle, set the bottom, left, and right to be transparent. The code and effect are as follows:
.trangle{
width: 0px;
height: 0px;
border: 100px solid #000;
border-top-color: red;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
}
<div class="trangle"></div>
2.5 Simplify the code
In fact, we don't need to set all four borders, just set the borders of the three sides involved in the triangle you want to draw. Take the uppermost triangle in the previous step as an example. You only need to set the top, left, and right sides. If you want the top triangle, set the left and right borders to be transparent. The code and effect are as follows:
.trangle{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}
<div class="trangle"></div>
3. Summary
At this point, the above are the specific steps and implementation principles of drawing a triangle. Then when the interviewer asks you how to draw a triangle using CSS, you can ask very prickly which side of the triangle do you want the tip to face? hahahahahahahahaha
This article is reprinted by other bloggers, if there is any infringement, please contact to delete!