CSS-клип обведите изображение и поместите другое изображение в качестве рамки

Question

Вопрос Similair можно найти здесь:

CSS: Как поместить изображение в круг, где низ обрезается, а верх выскакивает?

Тем не менее, я хотел бы заменить красный контур на изображение, например:

Я пробовал среди других: до и после теги psuedo, но не нашел решения. В каком направлении я должен искать, чтобы достичь этого?

Answer 1

Вы можете использовать несколько фонов, как это:

.box {
 width:200px;
 height:210px;
 border-radius: 0 0 50% 50%/0 0 70% 70%;
 background:
  url(https://stackru.com/images/d3f6dace04552118323108b7be7f77b003c41f83.png) center/cover, 
  url(https://stackru.com/images/ab95767b7544d2e3ade4d4ec8010dd6f91cdc90c.png) 0 180%/100% auto no-repeat;
 position:relative;
}
.box:after {
  content:"";
  position:absolute;
  z-index:1;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:url(https://stackru.com/images/ab95767b7544d2e3ade4d4ec8010dd6f91cdc90c.png) 0 90%/100% auto no-repeat;
}

<div class="box">

</div>

Вы также можете управлять изображением внутри, используя переменную CSS:

.box {
 width:200px;
 height:210px;
 border-radius: 0 0 50% 50%/0 0 70% 70%;
 background:
  var(--image) center/cover, 
  url(https://stackru.com/images/ab95767b7544d2e3ade4d4ec8010dd6f91cdc90c.png) 0 180%/100% auto no-repeat;
 position:relative;
 display:inline-block;
}
.box:after {
  content:"";
  position:absolute;
  z-index:1;
  bottom:0;
  top:50%;
  left:0;
  right:0;
  background:url(https://stackru.com/images/ab95767b7544d2e3ade4d4ec8010dd6f91cdc90c.png) 0 90%/100% auto no-repeat;
}

<div class="box" style="--image:url(https://stackru.com/images/d3f6dace04552118323108b7be7f77b003c41f83.png)">
</div>
<div class="box" style="--image:url(https://stackru.com/images/efb9db6fa30d65df500f200257c8b1ece98dde13.png)">
</div>