用纯css画一颗树

最新推荐文章于 2023-02-14 13:53:20 发布

qq_45117533

最新推荐文章于 2023-02-14 13:53:20 发布

阅读量886

点赞数

本文链接：https://blog.csdn.net/qq_45117533/article/details/103476585

版权

本文介绍了如何使用CSS绘制一棵简单的树。通过利用边框创建三角形来构建树叶，结合margin调整元素位置，形成完整的树的形状。教程中详细展示了创建上三角形、下三角形的代码，并最终组合成一棵树的示例。

摘要由CSDN通过智能技术生成

今天给大家讲一讲如何用css画一颗简单的树。在画树之前，首先要学会画一个三角形。
这里我们用边框来画一个三角形。首先给一个div，然后把它的宽高设置为0，把他的边框设置你想要的尺寸，线为实线，颜色为你想要的颜色。这里以画上三角为例，你就要把他的下边框颜色设置为你想要的颜色（这里以绿色为例），然后把其他三边设置为透明色，这样就可以画一个三角形出来了。下面就是画上三角的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.div1{
    
				width: 0px;
				height: 0px;
				border-top: 100px solid transparent;
				border-bottom: 100px solid green;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
	</