圣诞节来啦！请用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; }
