牛客网DAY2(编程题)

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：
1. "topbranch"是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
2. "middleBranch"是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
3. "base"是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。
注意：
1. 上枝叶、树干的居中都是通过左外边距实现的
2. 没有显示的边框，其属性都是透明（属性）
3. 仅通过border属性完成边框的所有属性设置

效果图如下

 接下来我们就来完成这个简单的圣诞树吧

第一步我们需要搭建三个盒子分别代表上枝叶中枝叶下树根的操作

        <section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>

接下来开始搭建样式

CSS样式

制作一个三角形我们需要让他的三条边进行隐形的操作

中枝叶的效果和上都是一样的，但是需要边框的大小即可

下面树根只需要给高宽就行了。一个简单的圣诞树就搭好了。

.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;
            }