How to create Geometric objects - 11 Trees 🌳 Pure CSS
Tags: webdev, css, beginners, tutorial
Published: 2021-07-23 18:40:07

<h1>Introduction</h1>
2 years ago, wandering through the expanses of Behance, I came across an interesting <a href="https://www.behance.net/gallery/74314999/FLOERA">work from the studio Flöra</a>. And in it I saw interesting geometric objects that reminded me of trees. I really liked the style of these illustrations and decided to try to implement them using CSS.

<h1>DEMO</h1>
{% codepen https://codepen.io/RodenKerthin/pen/WNjXpLz %}

> <strong>You can also download the project from my `GitHub repository`. (There is also a demo on `GitHub Pages`).</strong>
{% github Kerthin/trees-templateSait %}
<a href="https://kerthin.github.io/trees-templateSait/"><h1>Full Page Demo (GitHub Pages)</h1></a>

<h1>01. Seedling</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4r0ethujiy5rkowcls2.png)

Creating this tree took the most time because of the need to create the lower oval dotted lines. Since to create such lines, I needed to create 16 hemispheres, each of which had a different size.

<h1>02. Sepal</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f609rl67a514xe8zs62.png)

A very simple tree. There are no complicated shapes or lines.

<h1>03. Linden</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7vvem7z6q9l39btyj5l.png)

<h1>04. Pine</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf2ccx0h26xa2ug4gkw4.png)

To create winding lines with two or more corners, it is enough just to use several blocks with rounded corners that need to be connected in the necessary sequence.

<h1>05. Palm</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4ls70da320xu8jdixc1.png)

To create winding lines, the same method was used here as in the fourth tree.

<h1>06. Fir</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/om4crlh123evyhmcjlli.png)

To create the moon, I used a round invisible block, which had the `box-shadow` property set with the value `20px 20px 0 0 #000`.

> I used the same method in my other works with illustrations
{% codepen https://codepen.io/RodenKerthin/pen/yLgvGYp %}
{% link https://dev.to/kerthin/codepen-css-illustration-animation-8lo %}
{% codepen https://codepen.io/RodenKerthin/pen/QWddOgw %}
{% link https://dev.to/kerthin/codepen-css-icons-animation-3c1e %}

In order to create curved lines, you just need to set the properties for rounding individual corners. For example: `border-bottom-left-radius` or `border-bottom-right-radius`.

<h1>07. Rose</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5nuw3s72vln0x8o5r1h.png)

<h1>08. Willow</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s16foulkjr5gyum3soev.png)

<h1>09. Sunflower</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tzm47fgwpvu7zofdq5td.png)

To create such petals, you just need to use the `border-radius` property and set it to `50% 100px 0 80px` or `100px 50% 80px 0`. Depending on which way you need a slope.

<h1>10. Bell</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3wkvb8su8y78hflfom8.png)

To create winding lines, the same method was used here as in the fourth tree.

<h1>11. Poplar</h1>
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zteagsijmjsz6rvw8cq.png)

<h1>THE END</h1>
Well, that's it. I just wanted to share my old work and nothing more. Thanks for attention.

<strong>Goodbye</strong>
![Alt Text](https://media.giphy.com/media/HwXj1VRf9BJ04/giphy.gif)