借助這里的搜索功能，我已經找到了如何將圖像顯示為菱形的方法

img {
  width: 500px;
  height: 500px;
  object-fit: cover;
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

然而，我還沒有做到四個角都是圓的。

我還想顯示交錯排列的圖像。但是我的嘗試只有在最后一行有相同數量的圖像時才有效。我能更好地解決這個問題嗎？

img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}
.container {
  text-align: center;
}
.line {
  margin-top: -75px;
}

<div class="container">
  <div class="normal-line">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
  </div>
  <div class="line">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
    <img src="https://images.....">
  </div>
</div>

這是一個有點瘋狂的想法，我用我文章中的代碼來創建圖像網格，然后剪輯路徑結合遮罩來創建形狀

你所需要的就是更新CSS變量來控制布局。稍后我會嘗試添加更多的細節

.main {
  --r: 20px;   /* radius of images */
  --s: 150px;  /* size  of image */
  --m: 10px;   /* gap */
  
  --f: calc(var(--s) + 4*var(--m) - 2px);
  display:flex;
}

.container {
  font-size: 0; /*disable white space between inline block element */
}

.container img {
  width: var(--s);
  margin: var(--m);
  aspect-ratio: 1;
  clip-path: 
   polygon(
   50% calc(-.414*var(--r)), 
   calc(100% + .414*var(--r)) 50%, 
   50% calc(100% + .414*var(--r)), 
   calc(-.414*var(--r)) 50%);
  margin-bottom: calc(var(--m) - var(--s)*0.5);
  --_p: calc(25% + var(--r)/1.414);
  --_g: #0000 var(--_p),#000 0 calc(100% - var(--_p)), #0000 0;
  -webkit-mask:
    linear-gradient( 45deg,var(--_g)),
    linear-gradient(-45deg,var(--_g)),
    radial-gradient(var(--r) at 50% var(--r),#000 98%,#0000 101%)
     top/100% calc(100% - 2*var(--r)),
    radial-gradient(var(--r) at var(--r) 50%,#000 98%,#0000 100%)
     left/calc(100% - 2*var(--r)) 100%;
}
.container::before {
  content: "";
  width: calc(var(--s)/2 + var(--m));
  float: left;
  height: 140%;
  shape-outside: repeating-linear-gradient(     
                   #0000 0 calc(var(--f) - 3px),      
                   #000  0 var(--f));
}

body {
  background: #999;
}

<div class="main">
  <div class="container">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
   <img src="https://picsum.photos/id/75/200/200" alt="grap">
   <img src="https://picsum.photos/id/102/200/200" alt="raspberry">
   <img src="https://picsum.photos/id/248/200/200" alt="cactus">
   <img src="https://picsum.photos/id/1080/200/200" alt="strawberry">
  </div>
</div>