In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/03 Report--
This article will explain in detail how to use css to draw trees. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.
With css painting: 1, with div tags in the use of border attributes to draw triangles; 2, modify attributes with border to get triangles, syntax "{border- border: width border line color}"; 3, the first three div are used to draw triangles, the fourth div tag uses the margin attribute to adjust the position of div to the trunk.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
Today I will tell you how to draw a simple tree with css. Before drawing a tree, you must first learn to draw a triangle.
Here we draw a triangle with a border. First give a div, then set its width and height to 0, set its border to the size you want, the line is solid, and the color is the color you want. Here, take the upper triangle as an example, you need to set the color of its lower border to the color you want (green here), and then set the other three sides to transparent color, so you can draw a triangle. Here is the code to draw the upper triangle:
.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;}
This is the effect picture:
If you want the top corner of the triangle to be pasted on top of the browser, then the sentence border-top: 100px solid transparent; can be left out or set to 1px.
This is the code for the lower triangle:
.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;}
This is the effect picture:
Then you can draw a tree, first give a big div to put the whole tree, and then put four div in it, the first three div are used to draw triangles, that is, the upper part of the tree (leaves); the lower part is the trunk, that is, the fourth div. Then use the margin attribute to adjust the position of the div (only the margins are learned, and then you can do it with positioning). Such a complete tree is drawn; here is the detailed code
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 }
This is the final effect picture.
On how to use css to draw trees to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.