How to make a flower with pure CSS?

CodePen Code

The actual code I wrote is here😄

See the Pen Flower by Yuhomyan (@yuhomyan) on CodePen.

Anatomy of the CSS flower

  1. base
  2. flower
  3. leaf
  4. petal
  5. center

Let’s check these elements😉

base

“base" is literally the base for everything. This class works to center all elements.

.base {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  margin: -8px;
  background: #ffd6e4;
} 

flower

“flower" is a transparent box which contains each element to compose the flower shape.

You can skip this step, but if you set it, it will prevent the picture from collapsing.

.flower {
 box-sizing: border-box;
 position: relative;
 width: 200px;
 height: 200px;
}

leaf

I made two leaves by using pseudo-code :before.

.leaf{
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  background: #a4d5bd;
  border-radius: 0% 72% 10% 75% / 1% 75% 10% 86%; 
}
.leaf:before{
  content: '';
  position: absolute;
  display: inline-block;
  transform: rotate(40deg);
  width: 70px;
  height: 70px;
  background: #a4d5bd;
  border-radius: 0% 72% 10% 75% / 1% 75% 10% 86%;
  left: 40px;
  bottom: 10px;
}

The leaf shape is created by border-radius. In a normal way, one border-radius has one value, but in this, you’ll see that this have 8 values on one element.

This website is a really great job to decide border-radius! You just put the cursor as you like and can get the optimized border-radius value!

petal

“petal" has three part, one class and two pseudo-codes.

I made three ovals and changed their rotate.

.petal{
  position: relative;
  height: 70px;
  width: 200px;
  background: #fff;
  border-radius: 100px;
}
.petal:before,
.petal:after{
  content:'';
  position: absolute;
}
.petal:before{
  height: 70px;
  width: 200px;
  background: #fff;
  border-radius: 100px;
  transform: rotate(60deg); /* rotate to left */
}
.petal:after{
  height: 70px;
  width: 200px;
  background: #fff;
  border-radius: 100px;
  transform: rotate(-60deg); /* rotate to right */
}

So let’s change the background colour and the opacity(because it’s easier to see how they work), now it looks like this.

center

This class “center" is the pink round part in the middle of the flower.

It’s pretty simple.

.center{
  position: relative;
  height: 70px;
  width: 70px;
  background: #ffd6e4;
  border-radius: 100%;
  left: 65px;
  bottom: 70px;
}

Summary

That’s it!

I hope you enjoyed this post.

See you soon in the next post!