一棵树的css

来源：互联网发布：点点客知乎编辑：程序博客网时间：2024/06/06 03:56

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

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

0 0