ホームページ > 記事 > ウェブフロントエンド > CSSを使って木を描く方法
CSSを使って木を描く方法
- 奋力向前オリジナル
- 2021-09-10 10:56:233214ブラウズ
描画方法: 1. 3 つの div タグを定義し、border 属性を使用して、それらを異なるサイズの 3 つの三角形に変更します; 2. margin 属性を使用して、3 つの三角形の位置を制御してクラウンを形成します; 3 . 定義 1 div タグを使用して木の幹を作成し、margin 属性を使用して樹冠の下に配置します。
このチュートリアルの動作環境: 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>これはレンダリングです:
三角形の上隅を接続したい場合ブラウザの上部、次に 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>これはレンダリングです:
次に、木を描くことができます。まず、 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ビデオチュートリアル
以上がCSSを使って木を描く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。