用HTML+CSS来做一个渐变色几何花朵

近几年前端设计界的风潮又由纯色大色块转变到了渐变风格。借由鲜艳活泼的色彩能够在第一时间引起访问者的注意。合理的渐变配比也能让设计品更有质感。

本期「数字艺界」前端设计馆为大家带来一个基于渐变色彩的几何花朵实例。有兴趣的小伙伴们千万不要错过喔～

---

首先创建一个长宽为300的正方形容器，这个容器的创建决定了之后花朵的整体大小与定位参照物。

花瓣的单元形状实际上是由一个边长为外框二分之一的正方形容器，通过「border-radius」属性演变而来的，同时修改左上角和右下角的弧度边框即可得到叶片形状的基本元素。

现在我们用相同的方法来创建八个花瓣基本元素。

通过重复上述步骤我们的得到了全部的花瓣基本单位，经过简单的计算可以得知，拥有八片花瓣的几何花朵它们花瓣间的角度为「360deg / 8 = 45deg」。

现在通过添加7个「:nth-child()」选择器将每片花瓣定位至指定的位置，首先设定「position: absolute」值，让其以「geometric-flowers」为参照物。使用「transform-origin: 0 100%」来确定转换参照点为花瓣元素的左下角。使用「transform: rotate()」来确定每个花瓣的旋转角度，这里的角度分别为45，90，135，180，225，270，315。

最后使用「background: linear-gradient()」将每个花瓣分别设置为你喜欢的线性渐变背景色就完成几何花朵的制作了。

---

这次的教程主要使用到了CSS中的

定位「position」

渐变「background: linear-gradient()」

参照点「transform-origin」

旋转「transform: rotate()」

这些属性在常规的布局中也是相当基础和常用的，相信通过这次机会你能够使用这些特性来创建更多的几何花朵。

实例展示：

https://codepen.io/Mr_Chicnio/full/wOJePg

如果你感兴趣的话我们非常欢迎将你自己制作的几何花朵发送至邮箱:

digiarting@outlook.com

你的作品将有机会出现在「数字艺界」的展示台中。

---

扫码关注数字艺界公众号，更多创意等你发现:

转载于:https://juejin.im/post/5c847f916fb9a049e5547040