This edition of Digital Arts brings you an example of a geometric flower based on gradient colors. Interested partners must not miss oh ~
The unit shape of the petal is actually a square container with sides half the length of the outer frame, which is evolved by the “border-radius” attribute. The basic elements of the leaf shape can be obtained by modifying the radian border in the upper left and lower right corner.
Now we create the eight petal base elements in the same way.
By repeating the above steps, we get all the basic petal units. Through simple calculation, we can know that the Angle between the petals of the geometric flower with eight petals is “360deg / 8 = 45deg”.
Now position each petal to the specified position by adding seven “: nth-Child ()” selectors. First set “position: Absolute” to “geometric-flowers” as the reference. Use “transform-Origin: 0 100%” to determine that the transformation reference point is the lower-left corner of the petal element. Use “transform: rotate()” to determine the rotation Angle of each petal, which is 45,90,135,180,225,270,315.
This tutorial focuses on CSS
Position “Position”
Gradient “Background: Linear-gradient ()”
Reference point “transform-Origin”
Rotate “transform: rotate()”
These attributes are also fairly basic and common in regular layouts, and this is an opportunity to use them to create more geometric flowers.
Examples show:
https://codepen.io/Mr_Chicnio/full/wOJePg
If you are interested, we welcome you to send your own geometric flowers to email:
Your work will have a chance to appear in the Digital Arts showcase.
Scan code to pay attention to digital art public number, more creative you find:
