我試著做了幾個小時的邊界形狀，但沒有得到想要的結果。 我試過使用transform:skewX(20度)和clip-path: polygon(0% 0%，100% 0%，100% 50%，100% 100%，50% 100%)；

這是最近的一個

HTML
    <div class="skewed-image">
      <img src="/smiling-coworkers.png" alt="Your Image" />
    </div>

 CSS
.skewed-image {
  margin-top: 100px;
  margin-left: 200px;
  width: 500px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-right: 2px solid #000; /* Adjust the color and width as needed */
  border-radius: 40px 0 0 40px; /* Adjust the radius as needed */
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%);
}

.skewed-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40px 0 0 40px; /* Match the same radius as the container */
}   `

這是期望的結果(右圖)

你能試試下面的css嗎，我用了轉換傾斜，可能不準確，但你可以相應地調整css:

.skewed-image {
  width: 500px;
  margin-top: 100px;
  margin-left: 200px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 70px 0 0 40px;
  transform-origin: top;
  transform: skew(30deg);
}

.skewed-image img {
  display:block;
  transform-origin:inherit;
  transform:skew(-30deg);
  width: 100%;
  height: auto;
}