How to create a lollipop shape by stacking divs in a circular manner?

Question

How to stack divs in a circular manner in which last div should come beneath the first div but above the second last div. Is it possible with the css? any helps would be app

Answer 1

My approach would be a reusable SVG , with paths shaped by quadratic-bézier curves:

#svg-lollipop path { transform-origin: 50% 50%; }

#svg-lollipop path:nth-child(2) {  transform: rotateZ(60deg); }
#svg-lollipop path:nth-child(3) {  transform: rotateZ(120deg); }
#svg-lollipop path:nth-child(4) {  transform: rotateZ(180deg); }
#svg-lollipop path:nth-child(5) {  transform: rotateZ(240deg); }
#svg-lollipop path:nth-child(6) {  transform: rotateZ(300deg); }

.lollipop {
  width: 30%;
  display: inline-block;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  margin: 0 20px;
}

.lollipop::before {
  content: "";
  padding-bottom: 100%;
  display: block;
}

.lollipop svg {
  position: absolute;  
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  fill: currentColor;
}

.lollipop--animated {
  animation: rotate 10s linear 0s infinite;
}

@keyframes rotate {
  0% { transform: rotateZ(0) }
  100% { transform: rotateZ(1turn) }
}

---

How it works

The same shape was cloned 6 times and rotated in order to fill the whole svg. In this example, every coloured shape has an angle α = 30deg.

Then from trigonometry we can find the coordinates of the origin points for the curves: in the path the y-coordinate 63.6 is obtained as 150 - (150 * tan(α)), so if you need to change the amount of shapes and the angle, you can easily find yourself the origin points (quadratic curves are really easy to draw).

Finally, the outer wrapper has a border-radius and a hidden overflow in order to give a rounded shape.

---

The final result is also responsive, since the outer wrapper keeps its 1:1 aspect ratio.

The white area can be changed with a background-color set on the container, the coloured area can be changed instead with the color property (the fill property of the svg elements is set to currentColor for your convenience).

---

something I've noticed later

if you add a box-shadow: inset 0 0 20px #aaa; to the wrapper the image looks like an inflatable beach balloon than a lollipop.

Serendipity.