CSS를 사용하여 나무를 그리는 방법-CSS 튜토리얼-php.cn

CSS를 사용하여 나무를 그리는 방법

奋力向前

풀어 주다： 2023-01-11 09:19:12

원래의

3232명이 탐색했습니다.

그리기 방법: 1. 3개의 div 태그를 정의하고 테두리 속성을 사용하여 서로 다른 크기의 3개의 삼각형으로 수정합니다. 2. 여백 속성을 사용하여 3개의 삼각형의 위치를 제어하여 크라운을 형성합니다. 만들 태그 나무 줄기의 경우 여백 속성을 사용하여 왕관 아래에 배치합니다.

CSS를 사용하여 나무를 그리는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

오늘은 CSS를 이용하여 간단한 트리를 그리는 방법을 알려드리겠습니다. 나무를 그리기 전에 먼저 삼각형을 그리는 법을 배워야 합니다.

여기에서는 테두리를 사용하여 삼각형을 그립니다. 먼저 div를 지정한 다음 너비와 높이를 0으로 설정하고 테두리를 원하는 크기로 설정합니다. 선은 실선이고 색상은 원하는 대로 설정됩니다. 색상. 위쪽 삼각형을 예로 들면 아래쪽 테두리의 색상을 원하는 색상으로 설정해야 합니다(여기서는 녹색을 예로 들겠습니다). 그런 다음 다른 세 변을 투명한 색상으로 설정하여 다음과 같은 그림을 그릴 수 있습니다. 삼각형. 다음은 삼각형을 그리는 코드입니다: 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>
	</body>
</html>

로그인 후 복사

这是效果图：

CSS를 사용하여 나무를 그리는 방법

要想三角形的上面那个角贴在浏览器的上面，那么border-top: 100px solid transparent;这句话就可以不要，也可以把这个尺寸设置为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를 사용하여 나무를 그리는 방법

接下来就可以画一棵树了，首先给一个大的div，用来放整棵树，然后再在里面放四个div，前三个div用来画三角形，也就是树的上半部分（叶子）；下半部分就是树干，也就是第四个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를 사용하여 나무를 그리는 방법 삼각형의 상단 모서리를 브라우저 상단에 연결하려면 border-top: 100px solid transparent; 꼭 그럴 필요는 없으며 이 크기를 <code>1px로 설정할 수도 있습니다.
이것은 아래쪽 삼각형에 대한 코드입니다:

rrreee

이것은 렌더링입니다:

🎜그런 다음 트리를 그릴 수 있습니다. 먼저 전체 트리를 담을 수 있는 큰 div를 제공합니다. 트리, 그리고 그런 다음 4개의 div를 안에 넣습니다. 처음 3개의 div는 나무의 위쪽 부분(잎)을 그리는 데 사용됩니다. 네 번째 div입니다. 그런 다음 margin 속성을 사용하여 div의 위치를 조정합니다(저는 여백만 배웠고 나중에 위치 지정을 사용할 수 있습니다). 이런 식으로 완전한 트리가 그려집니다. 자세한 코드는 다음과 같습니다🎜rrreee🎜최종 렌더링입니다🎜🎜🎜🎜🎜추천 학습: 🎜CSS 비디오 튜토리얼🎜🎜

위 내용은 CSS를 사용하여 나무를 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!