How to draw a Christmas tree with CSS properties

For learning the front-end children's shoes, CSS mastery is a must. Today is the realization of the use of CSS to draw a Christmas tree.

The main practice is the CSS inside border practice and mastery degree.

Create a main area in body <p></p>: We use border to build a triangle inside the main area.

to change the background color of the main area: can be set to a height

Create a first triangle:

Each area here represents a rectangle and then the triangle is obtained by modifying the rectangle

Modify CSS properties to get a triangle:

Here the width and height is actually the length of the inside border, and then set the border and the left and right of the property, with transparent hide the border do not need to show.

Then use the P area to do the trunk:

Final effect: