**效果需求**

1. 菱形圖片
2. 相同間距
3. 無限延伸排列

**HTML**

<div class="new-year">
  <div><img src="圖"></div>
  <div><img src="圖"></div>
  <div><img src="圖"></div>
  <div><img src="圖"></div>
</div>

**SCSS**

$--size : 200px;

.new-year {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  div {
    float: left;
    width: $--size;
    height: $--size;
    overflow: hidden;
    background-color: #c21e1e;
    transform: rotate(45deg);
    &:nth-child(3n+1) {
      clear: left;
      margin-bottom: calc(calc($--size * tan(1 / 4)) * -1)
    }
    &:nth-child(3n+2) {
      margin-bottom: calc(calc($--size * tan(1 / 4)) * -1)
    }
    &:nth-child(3n+3){
      margin-bottom: calc(calc($--size * tan(1 / 4)) * -1)
    }
    &:nth-child(3n-1){
      clear: left;
      margin-left: calc(calc($--size / 4) * -1);
      margin-right: calc($--size / 2);
    }
    &:nth-child(3n-2){
      margin-left: calc($--size / 2);
    }
    img {
      transform: rotate(-45deg);
    }
  }
}

原畫面


套上CSS後