.img{
max-width:850px;
}
.triangle{
width:0;
height:0;
border-left:120px solid transparent;
border-right:120px solid transparent;
border-bottom:120px solid lime;
margin:0 auto;
}
.stem{
width:50px;
height:50px;
background:brown;
margin:0 auto;
}
/* HTML: <div class="star"></div> */
.star-fife{
  width: 180px;
  aspect-ratio: 1;
  margin:0 auto;
position:relative;
bottom:-64px;
  background: #F8CA00;
  clip-path: polygon(50% 0,
    calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
    calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
    calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
   );
  /* or more simple
  clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
   */
}

.garland1{
width:50px;
height:50px;
border-radius:50%;
background:red;
position:absolute;
margin-top:-80px;
margin-left:340px;
}
.garland2{
width:50px;
height:50px;
border-radius:50%;
background:yellow;
position:absolute;
margin-top:-56px;
margin-left:250px;
}
.garland3{
width:50px;
height:50px;
border-radius:50%;
background:blue;
position:absolute;
margin-top:-80px;
margin-left:340px;
}
.garland4{
width:50px;
height:50px;
border-radius:50%;
background:purple;
position:absolute;
margin-top:-56px;
margin-left:250px;
}
.garland5{
width:50px;
height:50px;
border-radius:50%;
background:cyan;
position:absolute;
margin-top:-80px;
margin-left:340px;
}
.garland6{
width:50px;
height:50px;
border-radius:50%;
background:green;
position:absolute;
margin-top:-56px;
margin-left:250px;
}
.garland7{
width:50px;
height:50px;
border-radius:50%;
background:orange;
position:absolute;
margin-top:-80px;
margin-left:340px;
}
.garland8{
width:50px;
height:50px;
border-radius:50%;
background:magenta;
position:absolute;
margin-top:-56px;
margin-left:250px;
}
.garland-on{
background:gold;
filter:drop-shadow(0 0 20px #DAA520);

}