CSSを使って木を描く方法-CSSチュートリアル-php.cn

CSSを使って木を描く方法

奋力向前

リリース： 2023-01-11 09:19:12

オリジナル

3234 人が閲覧しました

描画方法: 1. 3 つの div タグを定義し、border 属性を使用して、それらを異なるサイズの 3 つの三角形に変更します; 2. margin 属性を使用して、3 つの三角形の位置を制御してクラウンを形成します; 3 . 定義 1 div タグを使用して木の幹を作成し、margin 属性を使用して樹冠の下に配置します。

CSSを使って木を描く方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

今日はCSSを使って簡単なツリーを描く方法を説明します。木を描く前に、まず三角形の描き方を学ばなければなりません。

ここでは、境界線を使用して三角形を描画します。まず div を指定し、次にその幅と高さを 0 に設定し、境界線を希望のサイズに設定し、線を実線に、色を色に設定します。欲しいです。ここでは、上の三角形を例として、その下の境界線の色を希望の色 (ここでは例として緑を使用します) に設定し、他の 3 つの辺を透明色に設定する必要があります。三角形を描きます。以下は三角形を描画するコードです:

<!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>
	</body>
</html>

ログイン後にコピー

これはレンダリングです:

CSSを使って木を描く方法

三角形の上隅を接続したい場合ブラウザの上部、次に border-top: 100px Solid traditional;この文は必要ありません。または、このサイズを 1px に設定できます。
これは下の三角形のコードです:

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

ログイン後にコピー

これはレンダリングです:

CSSを使って木を描く方法

次に、木を描くことができます。まず、 big div はツリー全体を配置するために使用され、その後さらに 4 つの div が内部に配置されます。最初の 3 つの div は三角形を描画するために使用されます。上部 (葉)、下部は幹であり、4 番目の div です。次に、margin 属性を使用して div の位置を調整します (マージンのみが学習されており、後で位置決めを使用できます)。このようにして、完全なツリーが描画されます。詳細なコードは次のとおりです

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.father{
				width: 1000px;
				height: 1000px;
				margin-top: 296px;
				margin-left: 800px;
			}
			.son1{
				width: 0px;
				height: 0px;
				border-top: 100px solid transparent;
				border-bottom: 100px solid green;
				border-left: 100px solid transparent;
				border-right: 100px solid transparent;
				margin-top: -98px;
				margin-left: 100px;
			}
			.son2{
				width: 0px;
				height: 0px;
				border-top: 150px solid transparent;
				border-bottom: 150px solid green;
				border-left: 150px solid transparent;
				border-right: 150px solid transparent;
				margin-top: -180px;
				margin-left: 50px;
			}
			.son3{
				width: 0px;
				height: 0px;
				border-top: 200px solid transparent;
				border-bottom: 200px solid green;
				border-left: 200px solid transparent;
				border-right: 200px solid transparent;
				margin-top: -240px;
				
			}
			.son4{
				width: 50px;
				height: 300px;
				background-color: brown;
				margin-left: 177px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="son3"></div>
			<div class="son4"></div>
		</div>
	</body>
</html>

ログイン後にコピー

これが最終的なレンダリングです

CSSを使って木を描く方法