Christmas is coming! Please use CSS to make a Christmas tree for your friends~ The description of this Christmas tree is as follows:
1. "topbranch" is the top branch of the Christmas tree. accomplish. The attributes of the border are: width 100px, straight line, green color (the color of the border not displayed is transparent) 2.
"middleBranch" is the middle branch of the Christmas tree, which can be realized only through the border attribute. The attributes of the border are: width 200px, straight line, green color (the color of the border not shown is transparent) 3.
"base" is the trunk of the Christmas tree, which is centered on the middle branches and leaves only through the left margin. The width and height of the trunk are 70px and 200px respectively, and the color is gray.
Note:
1. The centering of the upper branches, leaves and trunks is achieved through the left margin
2. The borders that are not displayed, their properties are all transparent (attributes)
3. All property settings of the border are completed only through the border property
The renderings are as follows
Next, let's complete this simple Christmas tree.
In the first step, we need to build three boxes to represent the operation of the upper branch and the middle branch and the lower root of the tree respectively.
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>Next, start to build the style
css style
To make a triangle we need to make its three sides invisible
The effect of the middle branches and leaves is the same as above, but the size of the border is required
The root of the tree below only needs to be given the height and width. A simple Christmas tree is set up.
.topbranch {
width: 0px;
height: 0px;
/*
* TODO: 上枝叶效果
*/
border: 100px solid green;
float: left;
margin-left: 100px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
.middleBranch {
width: 0px;
height: 0px;
/*
* TODO: 中枝叶效果
*/
border: 200px solid green;
margin-left: 10px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
.base {
/*
* TODO: 树干效果
*/
width: 70px;
height: 200px;
background-color: gray;
margin-left: 170px;
}