How to create a flower like structure in css and html

KourtneyKearney
April 29, 2023
266 views
2 votes
3 Answers

I am trying to create an image like the following using a combination of HTML and CSS, but I can’t seem to get the ‘petals’ to rotate around the middle.

Here is my code:

.flower{
  height: 600px;
  width: 600px;
  margin: 20px;
  display:  flex;
  align-items:  center;
  justify-content:  center;
  position:  relative;
}

.mid{
  width:  200px;
  height: 200px;
  border-radius:  50%;
  background: #35414d;
  z-index:  4;
}

.petal{
  position:  absolute;
  left: 40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background:  #b5a9d4;
}

.petal.p1 {
  transform: rotate(22.5deg);
   z-index: 5;
}

.petal.p2 {
  transform: rotate(50deg);
   z-index: 5;
}

.petal.p3 {
  transform: rotate(100deg);
   z-index: 5;
}

<div class="flower" >
<div class="mid"></div>
  <div class="petal p1"></div>
  <div class="petal p2"></div>
  <div class="petal p3"></div>
  <div class="petal p4"></div>
  <div class="petal p5"></div>
  <div class="petal p6"></div>
  <div class="petal p7"></div>
  <div class="petal p8"></div>
</div>

What transform values would work best to get 8 petals to surround the center circle?

Tags: css html

Answers

You need to set the transform-origin of each petal to the centre of the flower. The transform origin is the point around which each petal will be rotated. So if you place all your petals on the flower’s edge, and set the transform origin to the centre, when you apply transform: rotate() to each petal, they will be rotated around the edges of the flower.

.wrap {
  width: 100%;
  height: 300px;
  position: relative;
}
.center {
  width: 200px;
  height: 200px;
  border-radius: 999px;
  background-color: rgba(20, 30, 255, 0.5);
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  margin: auto;
}
.petal {
  width: 100px;
  height: 100px;
  border-radius: 999px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: rgba(20, 30, 255, 0.5);
  transform-origin: center 150px;
}
.petal:nth-child(1) {
  transform: rotate(45deg);
}
.petal:nth-child(2) {
  transform: rotate(90deg);
}
.petal:nth-child(3) {
  transform: rotate(135deg);
}
.petal:nth-child(4) {
  transform: rotate(180deg);
}
.petal:nth-child(5) {
  transform: rotate(225deg);
}
.petal:nth-child(6) {
  transform: rotate(270deg);
}
.petal:nth-child(7) {
  transform: rotate(315deg);
}
.petal:nth-child(8) {
  transform: rotate(360deg);
}

<div class="wrap">  
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  <div class="petal"></div>
  
  <div class="center"></div>
</div>

Make 8 copies of a .mid and a .petal within it. Then position the .mids on top of each other with z-index 1 to 8. Next rotate each .mid 45deg progressively (ex. 0, 45, 90,… 315).

.flower {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96vw;
  height: 600px;
  padding: 20px;
}

section {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.stem {
  background: #35414d;
}

.petal {
  position: absolute;
  top: 180px;
  left: calc(50% - 60px);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(181, 169, 212, 0.5);
}

.m1 {
  z-index: 1;
}

.m2 {
  transform: rotate(45deg);
  z-index: 2;
}

.m3 {
  transform: rotate(90deg);
  z-index: 3;
}

.m4 {
  transform: rotate(135deg);
  z-index: 4;
}

.m5 {
  transform: rotate(180deg);
  z-index: 5;
}

.m6 {
  transform: rotate(225deg);
  z-index: 6;
}

.m7 {
  transform: rotate(270deg);
  z-index: 7;
}

.m8 {
  transform: rotate(315deg);
  z-index: 8;
}

<div class="flower">
  <section class="mid stem"></section>
  <section class="mid m1">
    <div class="petal"></div>
  </section>
  <section class="mid m2">
    <div class="petal"></div>
  </section>
  <section class="mid m3">
    <div class="petal"></div>
  </section>
  <section class="mid m4">
    <div class="petal"></div>
  </section>
  <section class="mid m5">
    <div class="petal"></div>
  </section>
  <section class="mid m6">
    <div class="petal"></div>
  </section>
  <section class="mid m7">
    <div class="petal"></div>
  </section>
  <section class="mid m8">
    <div class="petal"></div>
  </section>
</div>

.container {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
}

.big-circle {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgba(135, 206, 235, 0.55);
}

.small-circle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
border-radius: 50%;
background-color: rgba(135, 206, 235, 0.55);
}

.small-circle:nth-child(1) {
transform: translate(-50%, -80%) rotate(36deg) translate(0, 60px) rotate(-36deg);
}

   .small-circle:nth-child(2) {
transform: translate(-50%, -80%) rotate(72deg) translate(0, 60px) rotate(-72deg);
}

.small-circle:nth-child(3) {
transform: translate(-50%, -80%) rotate(108deg) translate(0, 60px) rotate(-108deg);
}

.small-circle:nth-child(4) {
transform: translate(-50%, -80%) rotate(144deg) translate(0, 60px) rotate(-144deg);
}

.small-circle:nth-child(5) {
transform: translate(-50%, -80%) rotate(180deg) translate(0, 60px) rotate(-180deg);
}

.small-circle:nth-child(6) {
transform: translate(-50%, -80%) rotate(216deg) translate(0, 60px) rotate(-216deg);
}

.small-circle:nth-child(7) {
transform: translate(-50%, -80%) rotate(252deg) translate(0, 60px) rotate(-252deg);
}

.small-circle:nth-child(8) {
transform: translate(-50%, -80%) rotate(288deg) translate(0, 60px) rotate(-288deg);
}

.small-circle:nth-child(9) {
transform: translate(-50%, -80%) rotate(324deg) translate(0, 60px) rotate(-324deg);
}

.small-circle:nth-child(10) {
transform: translate(-50%, -80%) rotate(360deg) translate(0, 60px) rotate(-360deg);
}

.small-circle:nth-child(11) {
transform: translate(-50%, -80%) rotate(36deg) translate(0, 60px) rotate(-36deg);
}

<div class="container">
  <div class="big-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
  <div class="small-circle"></div>
 </div>

Please signup or login to give your own answer.

Click here to cancel reply.