您可以使用以下代码实现以下布局：https://codepen.io/shalinigandhi/pen/rNQydZR

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --border-radius: 50px;
  --height: 100px;
}

.banner-container {
  width: 100%;
  height: var(--height);
  border-bottom-left-radius: var(--border-radius);
  overflow: hidden;
}

.banner {
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.content-container {
  position: relative;
  width: 100%;
  min-height: var(--height);
  border-top-right-radius: var(--border-radius);
  background: #fff;
  padding: 20px 50px;
}

.content-container:before {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: var(--height);
  background-image: url(https://i.imgur.com/pBMGV2m.jpeg);
  background-position: 0px calc(var(--height) * -1);
  background-size: cover;
  background-repeat: no-repeat;
}

<div class="page-container">
  <div class="banner-container">
    <img class="banner" src="https://i.imgur.com/pBMGV2m.jpeg" alt="Image">
  </div>
  <div class="content-container">
    <p>Curved Banner Layout</p>
  </div>
</div>