题解 | 圣诞树
圣诞树
https://www.nowcoder.com/practice/4924913926d94e96a70bbf2a50847852
本题.topbranch推荐使用浮动,此时.topbranch距离页面顶端100px,整个盒子高度为200px,而.middleBranch距离页面顶端恰好为200px,不需要使用margin-top调整位置。
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.topbranch {
width: 0px;
height: 0px;
float: left;
border: 100px solid transparent;
border-bottom: 100px solid green;
margin-left: 100px;
/*
* TODO: 上枝叶效果
*/
}
.middleBranch {
width: 0px;
height: 0px;
border: 200px solid transparent;
border-bottom: 200px solid green;
/*
* TODO: 中枝叶效果
*/
}
.base {
width: 70px;
height: 200px;
background-color: gray;
margin-left: 165px;
/*
* TODO: 树干效果
*/
}
</style>
</head>
<body>
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>
</body>
</html>
