.balloon {
  --balloonDimension: 15vmax; /* 15% of min(viewport width, height) */
  width: var(--balloonDimension);
  height: var(--balloonDimension);
  border-radius: 100% 100% 15% 100%;
  margin: 0 0 0 25px;
  transform: rotateZ(45deg);
  position: fixed;
  bottom: calc(-1 * var(--balloonDimension));
  left: 0;
  background-color: aqua;
}
.balloon::before {
  content: "";
  width: 10%;
  height: 25%;
  background: radial-gradient(circle, rgba(255,255,255,.7) 0%, rgba(255,255,255,.1) 100%);
  position: absolute;
  left: 15%;
  top: 45%;
  border-radius: 100%;
}
.balloon::after {
  content: "";
  width: 13%;
  height: 5%;
  background-color: inherit;
  position: absolute;
  left: 90%;
  top: 94%;
  border-radius: 22%;
  transform: rotateZ(-45deg);
}
.balloon .string {
  position: absolute;
  background-color: #990;
  width: 2px;
  height: calc(var(--balloonDimension) * .6);
  transform-origin: top center;
  transform: rotateZ(-45deg);
  top: calc(var(--balloonDimension) - 6px);
  left: calc(var(--balloonDimension) - 8px);
}
.yellow{
  background-color: rgba(150, 150, 0, .45);
}
.green{
  background-color: rgba(0, 150, 0, .45);
}
.blue{
  background-color: rgba(0, 0, 150, .45);
}
.red{
  background-color: rgba(150, 0, 0, .45);
}