Skip to content

[css] 第661天 使用css制作一个圣诞树 #3525

@haizhilin2013

Description

@haizhilin2013
Collaborator

第661天 使用css制作一个圣诞树

3+1官网

我也要出题

Activity

squid-Xu

squid-Xu commented on Feb 5, 2021

@squid-Xu

圣诞树

<!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>
smalldice

smalldice commented on Feb 5, 2021

@smalldice

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@smalldice@squid-Xu

        Issue actions

          [css] 第661天 使用css制作一个圣诞树 · Issue #3525 · haizlin/fe-interview