CSSBattle 15.83: Supernova Solution

Approach

5 stacked items: 4 half circles and 1 circle

For each of 4 half circles, use rotate and translateY to place

Result: 100% match

Implementation

1<div class="container">
2  <div class="half-circle"></div>
3  <div class="half-circle"></div>
4  <div class="half-circle"></div>
5  <div class="half-circle"></div>
6  <div class="circle"></div>
7</div>
8<style>
9  body {
10    margin: 0;
11    background: #243d83;
12    display: flex;
13    height: 100%;
14    justify-content: center;
15    align-items: center;
16  }
17  .container {
18    display: grid;
19    place-items: center;
20  }
21  .half-circle {
22    grid-area: 1/1;
23    width: 100px;
24    height: 50px;
25    background: #6592cf;
26    border-top-left-radius: 100px;
27    border-top-right-radius: 100px;
28  }
29  .half-circle:nth-child(1) {
30    transform: rotate(-45deg) translateY(-85px);
31  }
32  .half-circle:nth-child(2) {
33    transform: rotate(45deg) translateY(-85px);
34  }
35  .half-circle:nth-child(3) {
36    transform: rotate(135deg) translateY(-85px);
37  }
38  .half-circle:nth-child(4) {
39    transform: rotate(-135deg) translateY(-85px);
40  }
41  .circle {
42    grid-area: 1/1;
43    background: #eeb850;
44    width: 60px;
45    height: 60px;
46    border-radius: 100%;
47  }
48</style>

Other Battle #15 solutions

#81 - Odoo

#82 - Diamond Cut

#83 - Supernova

#84 - Junction

#85 - Pythagoras

#86 - Stairway

References

Original challenge