How to draw a triangle using the CSS border property

Using borders to draw triangles is actually a strange skill.

uses a feature of the border: when the width and height of an element are both 0, set the width of the border (set the width of at least 2 adjacent borders), and the border will Will prop up this element.

When the width of the four borders is set at the same time, the four sides finally merge into a point at the center of the element.

So when we set a border for an element with width and height, the four borders are connected diagonally instead of at right angles. As shown in the picture:

##So do not set the width and height, give four When the borders are set to different colors respectively, you can get 4 triangles with different colors and different directions:

When you want to get a triangle, you cannot set a separate border. When you set only one border, it is just a line with only width and no height, and cannot be displayed on the page;

Therefore, you still need to set 4 borders at the same time or set the width of two adjacent borders, and only add a color to one of the borders:

Set 4 edges:

The above is the detailed content of How to draw a triangle using the CSS border property. For more information, please follow other related articles on the PHP Chinese website!