How to draw a tree using css

Drawing method: 1. Define 3 div tags and use the border attribute to modify them into 3 triangles of different sizes; 2. Use the margin attribute to control the position of the 3 triangles to form a crown; 3. Definition 1 Create a tree trunk with a div tag, and use the margin attribute to position it below the crown.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Today I will tell you how to draw a simple tree using CSS. Before drawing a tree, you must first learn to draw a triangle.

Here we use the border to draw a triangle. First give adiv, then set its width and height to0, set its border to the size you want, the line to be a solid line, and the color to be the color you want. . Here, taking the upper triangle as an example, you need to set the color of its lower border to the color you want (here, take green as an example), and then set the other three sides to transparent colors, so that you can draw a triangle. . The following is the code to draw the triangle:

This is the rendering:

If you want the upper corner of the triangle to be attached to the top of the browser, thenborder-top: 100px solid transparent;You don’t need this sentence, or you can set this size to1px.
This is the code for the lower triangle:

This is the rendering:

Next you can draw a tree, first give a The bigdivis used to place the whole tree, and then four moredivare placed inside. The first threedivare used to draw triangles, which are the trees. The upper part (leaves); the lower part is the trunk, which is the fourthdiv. Then use themarginattribute to adjust the position ofdiv(only the margins have been learned, and you can use positioning later). In this way, a complete tree is drawn; the following is the detailed code

This is the final rendering

Recommended learning:CSS Video tutorial

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