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