:root {
  --lilac: #D6BEDA;
  --red: #D30E16;
}

body{
  background: #5BB79D;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 150px;
  height:600px;

}

.wrapper {
  position: absolute;
  top: 100px;
  background: repeating-linear-gradient(to right,
    var(--lilac),
    #B8A6BC 7px,
    var(--lilac) 9px
  );
  width: 150px;
  height: 85px;
  -webkit-clip-path: polygon(15% 100%, 84% 100%, 100% 0, 0 0);
          clip-path: polygon(15% 100%, 84% 100%, 100% 0, 0 0);
}

.topping {
  position: absolute;
  top: 70px;
  left: -5px;
  width: 160px;
  height: 50px;
  overflow: hidden;
}

.topping::before {
  content: '';
  position: absolute;
  width: 85px;
  height: 50px;
  border-radius: 50% 0 0 50%;
  background: white;
  -webkit-transform: skew(10deg, 5deg);
          transform: skew(10deg, 5deg);
  border-bottom: 1px solid gray;
}

.topping::after {
  content: '';
  position: absolute;
  border-bottom: 1px solid gray;
  left:75px;
  width: 85px;
  height: 50px;
  border-radius: 0 50% 50% 0;
  background: white;
  -webkit-transform: skew(-10deg, -5deg);
          transform: skew(-10deg, -5deg);
}

.topping-middle {
  position: absolute;
  top: 40px;
  left: 5px;
  width: 140px;
  height: 50px;
  overflow: hidden;
}

.topping-middle::before {
  content: '';
  position: absolute;
  background: white;
  width: 75px;
  height: 50px;
  border-radius: 50% 0 0 50%;
  -webkit-transform: skew(10deg, 5deg);
          transform: skew(10deg, 5deg);
  border-bottom: 1px solid gray;
}

.topping-middle::after {
  content: '';
  position: absolute;
  left: 65px;
  background: white;
  width: 75px;
  height: 50px;
  border-radius: 0 50% 50% 0;
  -webkit-transform: skew(-10deg, -5deg);
          transform: skew(-10deg, -5deg);
  border-bottom: 1px solid gray;
}

.topping-top {
  position: absolute;
  left: 25px;
  top: 10px;
  width: 110px;
  height: 50px;
  overflow: hidden;
}

.topping-top::before {
  content: '';
  position: absolute;
  background: white;
  width: 55px;
  height: 50px;
  border-radius: 50% 0 0 50%;
  -webkit-transform: skew(10deg, 5deg);
          transform: skew(10deg, 5deg);
  border-bottom: 1px solid gray;
}

.topping-top::after {
  content: '';
  position: absolute;
  left: 45px;
  background: white;
  width: 55px;
  height: 50px;
  border-radius: 0 50% 50% 0;
  -webkit-transform: skew(-10deg, -5deg);
          transform: skew(-10deg, -5deg);
  border-bottom: 1px solid gray;
}

.cherry {
  position: absolute;
  left: 68px;
  top: -15px;
  -webkit-transform: rotate(-10deg);
          transform: rotate(-10deg);
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-top: 20px solid #6C0202;
}

.cherry::before {
  content: '';
  position: absolute;
  left: -20px;
  top: -8px;
  background: var(--red);
  width: 20px;
  height: 30px;
  border-radius: 50% 30% 0 50%;
}

.cherry::after {
  content: '';
  position: absolute;
  top: -8px;
  background: var(--red);
  width: 20px;
  height: 30px;
  border-radius: 30% 50% 50% 0;
}