Example of using CSS properties to implement a Christmas tree (picture)

For children who are learning front-end, mastering CSS is a must. Today we will draw a Christmas tree using css.

The main practice is the practice and mastery of borders in CSS.

Create a main area in the body

: The triangle we build with border is in the main area.

Change the background color of the main area: You can set a height

##Create the first triangle:

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

Modify the css properties to get the triangle:

The width and sum here Height is actually the length of the inner border, and then sets the properties of the upper, lower, left and right borders respectively, and uses transparent to hide the borders that do not need to be displayed.

Then use the p area to make the trunk:

final effect:

The above is the detailed content of Example of using CSS properties to implement a Christmas tree (picture). For more information, please follow other related articles on the PHP Chinese website!