Home  >  Article  >  Web Front-end  >  How to draw a triangle using the CSS border property

How to draw a triangle using the CSS border property

巴扎黑
巴扎黑Original
2017-07-17 15:06:052617browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn