这里有一个可能的解决方案：

.box.active {
  position: relative;
}
.box.active::after,
.box.active::before {
  content: '';
  bottom: 0;
  left: 100%;
  position: absolute;
  width: 30px;
  height: 30px;
}
.box.active::after {
  background-color: white;
  border-radius: 0 0 0 30px;
}
.box.active::before {
  background-image: url('https://placekitten.com/2000/600');
  background-position: -432px -152px;
}

字符串
Demo的数据。
请注意，我 * 强烈 * 建议 * 反对 * 这种类型的硬编码大小到容器/背景图像。它不能很好地扩展，也不是响应友好的。
老实说，从图形的Angular 来看，我也不觉得它特别吸引人。我知道我在这里是主观的，我的保留意见可能会用更合适的颜色/图像来减少。
无论如何，如果要求创建这种类型的 “设计” 而不对像素进行硬编码，我可能会动态地生成一个SVG形状，该形状将通过内容容器的大小的任何更改（使用ResizeObserver s）进行真实的更新。我使用这个动态SVG来mask第三个元素，它只负责裁剪背景，呈现在内容容器下面。
另一个不错的解决方案是使用CSS变量将当前的解决方案转换为一个更动态的解决方案：demo。

我在这里做了一些类似的：https://twitter.com/ChallengesCss/status/1661822077584789507我使用CSS掩码的地方：

.house-info {
  --h: 80px;  /* the intresection height*/
  --g: 16px;  /* the gap */
  --r: 18px;  /* the radius */
  
  display: grid;
  gap: var(--g);
  grid-auto-rows: 200px;
  max-width: 25rem;
  margin: 2rem auto;
  container-type: inline-size;
}
.house-info > img {
  width: 100%;
  height: calc(100% + var(--h)/2);
  object-fit: cover;
  border-radius: var(--r);
  --_g:/var(--r) var(--r) radial-gradient(100% 100% at 100% 0,#0000 98%,#000 101%) no-repeat;
  -webkit-mask:
    calc(50% + var(--g)/2 + var(--r)/2) 100% var(--_g),0 calc(100% - var(--h)) var(--_g),
    radial-gradient(100% 100% at 0 100%,#0000 98%,#000 101%) no-repeat
      calc(50% - var(--r)/2) calc(100% - var(--h) + var(--g) + var(--r))/
      calc(var(--g) + var(--r)) calc(var(--g) + var(--r)),
    conic-gradient(from 180deg at calc(50% + var(--g)/2) calc(100% - var(--h)),#0000 25%,#000 0);
  -webkit-mask-composite: xor; 
          mask-composite: exclude;
}
.house-info > div {
  margin-top: calc(var(--h)/-2);
  border-radius: var(--r);
  --_g:/var(--r) var(--r) radial-gradient(100% 100% at 0 100%,#0000 98%,#000 101%) no-repeat;
  -webkit-mask:
    calc(50% - var(--g)/2 - var(--r)/2) 0 var(--_g),100% var(--h) var(--_g),
    radial-gradient(100% 100% at 100% 0,#0000 98%,#000 101%) no-repeat
      calc(50% + var(--r)/2) calc(var(--h) - var(--g) - var(--r))/
      calc(var(--g) + var(--r)) calc(var(--g) + var(--r)),
    conic-gradient(at calc(50% - var(--g)/2) var(--h),#0000 25%,#000 0);
  -webkit-mask-composite: xor,xor,source-over; /* xor alone should be fine but I get a strange line */
          mask-composite: exclude;
  background: linear-gradient(135deg,#000,#ddd);
  color: #fff;
  padding: 1rem;
  font-family: system-ui;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.8;
}
.house-info > div span {
  display: block;
  background: #fff;
  color: #000;
  text-align: center;
  width: calc(50% - 1rem - var(--g)/2);
  padding-inline: .5rem;
  border-radius: calc(var(--r) - .5rem);
  box-sizing: border-box;
}

@container (width < 20rem) {
  .house-info > div,
  .house-info > img{
    margin: 0;
    height: 100%;
    -webkit-mask: none;
  }
  .house-info > div span {
    width: 100%;
  }
}


html {
  background: repeating-linear-gradient(135deg,#fff 0 20px,#eee 0 40px);
  min-height: 100%;
}

个字符

最好只使用一个div，将两个div改为一个div，并在CSS中使用溢出，然后在JavaScript中添加单击事件。所以，我的建议是使用CSS溢出，这样它就简洁而不太复杂。CSS溢出：https://www.w3schools.com/css/css_overflow.asp
提示是，当点击时改变溢出值。可以使用JavaScript上的切换。js切换：https://www.w3schools.com/howto/howto_js_toggle_class.asp的