Home > Article > Web Front-end > 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:
##Only set two adjacent 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!