Maison > Article > interface Web > Comment dessiner un arbre en CSS
Comment dessiner un arbre en CSS
- 奋力向前original
- 2021-09-10 10:56:233208parcourir
Méthode de dessin : 1. Définissez 3 balises div et utilisez l'attribut border pour les modifier en 3 triangles de tailles différentes ; 2. Utilisez l'attribut margin pour contrôler la position des 3 triangles pour former une couronne ; 3. Définissez 1 div ; tag à réaliser Pour le tronc d'arbre, utilisez l'attribut margin pour le positionner en dessous de la couronne.
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
Aujourd'hui, je vais vous expliquer comment dessiner un arbre simple en utilisant CSS. Avant de dessiner un arbre, vous devez d'abord apprendre à dessiner un triangle.
Ici, nous utilisons la bordure pour dessiner un triangle. Donnez d'abord un div, puis définissez sa largeur et sa hauteur sur 0, définissez sa bordure à la taille souhaitée, la ligne est une ligne continue et la couleur est celle que vous souhaitez. vouloir. En prenant le triangle supérieur comme exemple, vous devez définir la couleur de sa bordure inférieure sur la couleur souhaitée (ici, prenez le vert comme exemple), puis définir les trois autres côtés sur des couleurs transparentes, afin de pouvoir dessiner un triangle supérieur. triangulaire. Voici le code pour dessiner le triangle : 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>这是效果图：
要想三角形的上面那个角贴在浏览器的上面，那么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>这是效果图：
接下来就可以画一棵树了，首先给一个大的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>Voici le rendu :
Si vous souhaitez que le coin supérieur du triangle soit attaché au haut du navigateur, alors border-top: 100px solid transparent; Ce n'est pas obligatoire, vous pouvez également définir cette taille sur <code>1px.
Voici le code du triangle inférieur :
div pour contenir l'arbre entier, puis mettez quatre div à l'intérieur. Les trois premiers div sont utilisés pour dessiner des triangles, qui sont la partie supérieure de l'arbre (les feuilles) ; est le quatrième div. Utilisez ensuite l'attribut margin pour ajuster la position de div (seules les marges ont été apprises, et vous pourrez utiliser le positionnement plus tard). De cette façon, un arbre complet est dessiné ; voici le code détaillé🎜rrreee🎜C'est le rendu final🎜🎜🎜🎜🎜Apprentissage recommandé : 🎜Tutoriel vidéo CSS🎜🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!