[css] 第661天 使用css制作一个圣诞树
haizhilin2013 opened this issue · comments
圣诞树
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>圣诞树</title>
<style>
.header{
width: 0px;
height: 0px;
border-top: 100px solid white;
border-right: 100px solid white;
border-bottom: 100px solid green;
border-left: 100px solid white;
float: left;
margin-left: 100px;
}
.main{
width: 0px;
height: 0px;
border-top: 200px solid white;
border-right: 200px solid white;
border-bottom: 200px solid green;
border-left: 200px solid white;
}
.footer{
width: 100px;
height: 200px;
background: gray;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
css片段:
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.leaf {
width: 400px;
height: 700px;
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
background-color: green;
}
.bar {
width: 100px;
height: 200px;
background-color: chocolate;
}