用CSS的border属性画一颗树

作者: xiaoxiaoxiao8 | 来源:发表于2018-02-06 09:44 被阅读33次

效果图如下：

tree

主要利用了CSS的border属性。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
</head>
<style>
    .containt {
        margin-top: 100px;
        transform-origin: 100px;
        transform: rotateY(50deg);
    }
    .leaf::before,.leaf::after {
        content: "";
        border: 50px solid transparent;
        border-right: 50px solid #8BC34A;
        border-bottom: 50px solid #8BC34A;
    }
    .leaf::after {
        border-right: 50px solid transparent;
        border-left: 50px solid #8BC34A;
    }
    .foot {
        width: 200px;
    }
    /*树干*/
    .trunk {
        width: 40px;
        height: 150px;
        margin: 0 auto;
        background-color: #bb998c;
    }
</style>
<body>
    <div class="containt">
        <div class="leaf"></div>
        <div class="leaf"></div>
        <div class="leaf"></div>
        <div class="leaf"></div>
        <div class="foot">
            <div class="trunk"></div>
        </div>
    </div>
</body>
</html>