用CSS的border属性画一颗树
2018-02-06 本文已影响33人
xiaoxiaoxiao8
效果图如下：
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>
