一棵树的css_css 一棵树-CSDN博客

本文链接：https://blog.csdn.net/boke14122621/article/details/70991460


<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>christmas tree</title>

<style>
    *{ padding: 0; margin: 0;}
    .tree{ position: relative;}
    .tree div{ position: absolute; width: 0; height: 0;}
    .tree .wood{ width: 20px; height: 50px; background-color:grey; left: 50%; margin-left: -10px; top: 170px;}
    .a1{ border-right: 40px solid green; border-top: 40px solid #fff; left: 50%; margin-left: -40px; top: 0;}
    .a2{ border-left: 40px solid green; border-top: 40px solid #fff; left: 50%; top: 0;}
    .b1{ border-right: 70px solid green; border-top: 70px solid #fff; left: 50%; margin-left: -70px; top: 20px;}
    .b2{ border-left: 70px solid green; border-top: 70px solid #fff; left: 50%; top: 20px;}
    .c1{ border-right: 100px solid green; border-top: 100px solid #fff; left: 50%; margin-left: -100px; top: 70px;}
    .c2{ border-left: 100px solid green; border-top: 100px solid #fff; left: 50%; top: 70px;}
</style>
</head>
<body>


<div class="tree">
    <div class="wood"></div>
    <div class=c1></div><div class=c2></div>
    <div class=b1></div><div class=b2></div>
    <div class="a1"></div><div class="a2"></div>
</div>
</body>
</html>

效果图如下：
这里写图片描述