css使用定位绘制一棵树

在CSS中，我们可以使用定位来绘制一些有趣的形状，比如一棵树。下面的代码演示了如何使用position属性和top、left属性来绘制一棵树：

.tree {
    position: relative;
    width: 0;
    height: 0;
    margin: 100px auto 0;
}
.tree:before {
    content: "";
    position: absolute;
    top: -40px;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 40px 20px;
    border-color: transparent transparent #6abf69 transparent;
    transform: translateX(-50%);
}
.tree:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px 50px 0 50px;
    border-color: #6abf69 transparent transparent transparent;
    transform: translateX(-50%);
}
.tree p {
    position: absolute;
    top: 80px;
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    width: 100px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    border: 1px solid #6abf69;
    border-radius: 20px;
}
    

我们通过一个主容器。 使用`:before`和`:after`伪元素来绘制树叶和树干，同时还设置了p标签来作为树最上方的节点。其中，`:before`用于画树叶，`:after`用于绘制树干。

可以看出，我们将主容器自身的大小设置为0，是因为我们不希望它占据任何空间，并且我们将它定位到页面的中心位置。

这种方法可以通过更改top、left等属性来调整树的大小、位置和形状。所以，放心尝试吧！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！