Cara melukis pokok menggunakan css-tutorial css-php.cn

Cara melukis pokok menggunakan css

奋力向前

Lepaskan： 2023-01-11 09:19:12

asal

3186 orang telah melayarinya

Kaedah melukis: 1. Tentukan 3 teg div dan gunakan atribut sempadan untuk mengubah suainya menjadi 3 segi tiga dengan saiz yang berbeza 2. Gunakan atribut margin untuk mengawal kedudukan 3 segi tiga untuk membentuk mahkota; . Definisi 1 Buat batang pokok dengan tag div, dan gunakan atribut margin untuk meletakkannya di bawah mahkota.

Cara melukis pokok menggunakan css

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Hari ini saya akan memberitahu anda cara melukis pokok mudah menggunakan CSS. Sebelum melukis pokok, anda mesti terlebih dahulu belajar melukis segitiga.

Di sini kita menggunakan sempadan untuk melukis segitiga. Mula-mula berikan div, kemudian tetapkan lebar dan tingginya kepada 0, tetapkan jidarnya pada saiz yang anda mahu, garisan kepada garisan padat dan warna kepada warna yang anda mahukan. Mengambil segitiga atas sebagai contoh, anda perlu menetapkan warna sempadan bawahnya kepada warna yang anda mahu (di sini, ambil hijau sebagai contoh), dan kemudian tetapkan tiga sisi yang lain kepada warna telus, supaya anda boleh melukis segi tiga. Berikut ialah kod untuk melukis segitiga:

<!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>

Salin selepas log masuk

Ini ialah pemaparan:

Cara melukis pokok menggunakan css

Jika anda mahu sudut atas segitiga itu menjadi dilampirkan pada bahagian atas penyemak imbas , maka ayat border-top: 100px solid transparent; boleh ditinggalkan, atau saiz boleh ditetapkan kepada 1px.
Ini ialah kod untuk segi tiga bawah:

<!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>

Salin selepas log masuk

Ini ialah rendering:

Cara melukis pokok menggunakan css

Seterusnya anda boleh melukis pokok, pertama Beri div besar untuk meletakkan seluruh pokok, dan kemudian meletakkan empat lagi div di dalam tiga div yang pertama digunakan untuk melukis segitiga, iaitu bahagian atas pokok (daun); ialah batang, iaitu yang keempat div. Kemudian gunakan atribut margin untuk melaraskan kedudukan div (Saya hanya mempelajari margin, dan anda boleh menggunakan kedudukan kemudian). Dengan cara ini, pokok lengkap dilukis; berikut ialah kod terperinci

<!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>

Salin selepas log masuk

Ini ialah pemaparan terakhir

Cara melukis pokok menggunakan css