How to hide overflow on the bottom of a container and still allow the image to escape the top of the container

Question

I've cut out an image of a person and I would like to use overflow: hidden to hide the bottom of the image along the line of my container so that it looks like the image is inside the container, but then allow it to expand out of the container on the top. So essentially, overflow-bottom: hidden would be ideal, but to the best of my knowledge that doesn't exist.

If I could figure out the math to make a clip-path: polygon() the same as my border-radius: 84% 38% 70% 43% / 55% 74% 59% 71%;, I think that would work, but I haven't managed so far.

.

Any suggestions on the best way to do this?

.avatar--container {
  border-radius: 84% 38% 70% 43% / 55% 74% 59% 71%;
  background-color: var(--pink);
  border: 20px solid var(--blue);
  height: 15rem;
  width: 25rem;
}

.avatar {
  width: 35rem;
  transform: translate(-10rem, -12rem);
  margin-bottom: 5rem;
}

<div className="avatar--container">
      <img className="avatar" src={src} alt="Rachel Hall" />
    </div>

Answer 1

In order to hide bottom overflow while showing an overflow at the top, the trick is to:

1. Put both image and clipped container inside a single parent element.
2. Set a fixed height to the parent element
3. Position clipped element to be behind image using negative z-index
4. Add an extra clipped element with border and a transparent background so this would act as an overlay for the bottom of the overflowing element.

body{
  background-color: #ffdfe9;
}
.main {
  height: 26rem;
  width: 30rem;
  overflow: hidden;
}
div.avatar--container {
  border-radius: 84% 38% 70% 43% / 55% 74% 59% 71%;
  background-color: #ff5d8f;
  border: 20px solid #a2d2ff;
  height: 15rem;
  width: 25rem;
  overflow: hidden;
  position: absolute;
  top: 10rem;
  z-index: -1;
}
div.avatar--container.c2 {
  background-color: transparent;
  background-color: transparent;
  border-left: 20px solid #a2d2ff;
  border-right: 20px solid #a2d2ff;
  border-bottom: 20px solid #a2d2ff;
  border-top: 20px solid transparent;
  z-index: 1;
}
.avatar {
  width: 30rem;
}

<div class="main">
      <img class="avatar c2" src="https://www.freeiconspng.com/uploads/female-model-png-model-png4-by-icekitz-3.png" alt="Rachel Hall" />
  <div class="avatar--container c2">
  </div>
<div class="avatar--container">
    </div>
</div>