---
# System prepended metadata

title: 春聯

---

**效果需求**

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);
    }
  }
}
```


原畫面

![Screenshot 2024-01-30 at 12.41.08 AM](https://hackmd.io/_uploads/ryFIBLr5p.png)



套上CSS後

![Screenshot 2024-01-30 at 12.37.10 AM](https://hackmd.io/_uploads/B1IvNUSc6.png)
