如何创建几何对象 - 11 种树形示例 🌳 纯 CSS

介绍

演示

完整页面演示（GitHub Pages）

01. 幼苗

02.萼片

03. 林登

04. 松树

05.棕榈树

06. 杉树

07. 玫瑰

08. 柳树

09. 向日葵

10. 贝尔

11. 白杨

剧终

介绍

两年前，我在 Behance 上闲逛时，偶然发现了Flöra 工作室的一幅作品。作品中一些有趣的几何图形让我联想到树木。我非常喜欢这种插画风格，于是决定尝试用 CSS 来实现它们。

演示

您也可以从我的网站下载该项目GitHub repository。（网站上也有演示GitHub Pages）。

Kerthin / trees-templateSait

树的几何表示

描述

这个网站展示的是我专门为作品集创作的作品示例。如果您想查看，可以点击下方链接。

• 演示

运用科技。

本项目采用了以下技术：

任务管理器

软件平台

预处理器

图书馆

软件包管理器

---

插件

为了通过 gulp 开发该项目，我使用了以下几种类型的 NPM 插件：

插件	地位	描述
gulp-sourcemaps		旨在生成css source maps调试代码时所需的信息。
gulp-imagemin		压缩PNG、JPEG和图像GIF​SVGimagemin
gulp-autoprefixer		前缀CSS​Autoprefixer
imagemin-pngquant		Pngquant imagemin插件
gulp-uglify		JavaScript使用UglifyJS3.进行压缩
吞咽者		Rigger是一个用于构建时间的包含引擎Javascript，，CSS。CoffeeScript
gulp-minify-css		Gulp用于压缩的插件CSS
里姆拉夫		节点的命令UNIX。rm -rf
吞咽观察		使用超高速 chokidar 并发出黑胶唱片的文件监视器

…

在 GitHub 上查看

完整页面演示（GitHub Pages）

01. 幼苗

绘制这棵树最耗时，因为需要绘制下方的椭圆形虚线。为了绘制这些虚线，我需要绘制16个大小不同的半球。

02.萼片

一棵非常简单的树。没有复杂的形状或线条。

03. 林登

04. 松树

要创建具有两个或多个角的蜿蜒线条，只需使用几个圆角块，并按必要的顺序连接即可。

05.棕榈树

为了画出蜿蜒的线条，这里采用了与第四棵树相同的方法。

06. 杉树

为了创建月亮，我使用了一个圆形的不可见方块，并将其box-shadow属性设置为该值20px 20px 0 0 #000。

我在其它插图作品中也使用了相同的方法。

CodePen - CSS 插图（动画）

罗登 ・ 2021年5月19日

#codepen #css #html #webdev

CodePen - CSS 图标（动画）

罗登 ・ 2021年5月21日

#codepen #webdev #css #html

要创建曲线，只需设置各个拐角的圆角属性即可。例如：border-bottom-left-radius或border-bottom-right-radius。

07. 玫瑰

08. 柳树

09. 向日葵

要创建这样的花瓣，你只需要使用该border-radius属性并将其设置为50% 100px 0 80px或100px 50% 80px 0，具体取决于你需要的倾斜方向。

10. 贝尔

为了画出蜿蜒的线条，这里采用了与第四棵树相同的方法。

11. 白杨

剧终

好了，就这些。我只是想分享一下我以前的作品，仅此而已。谢谢关注。

再见