---
# System prepended metadata

title: 稀飯版 Day20
tags: [Layout, CSS, HTML]

---

# 稀飯版 Day20
Date: 2024/10/12

### [CSScoke](https://youtu.be/QKGhYoRHJnI)

+ 重點：捏一個 pseudo elements 然後旋轉 45 deg
+ 重點：使用 `:nth-child(n+?)` 指定哪些方塊錯開

![旋轉拼接方塊](https://i.imgur.com/YdCnwjQ.png)

+ 線稿

![旋轉拼接方塊-線稿](https://i.imgur.com/yeT5Q55.png)

```html
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul>
      <li class="box">
        <i class="fa fa-rss" aria-hidden="true"></i>Our Blogs
      </li>
      <li class="box">
        <i class="fa fa-newspaper-o" aria-hidden="true"></i>Latest News
      </li>
      <li class="box">
        <i class="fa fa-file" aria-hidden="true"></i>Documents
      </li>
      <li class="box">
        <i class="fa fa-calendar" aria-hidden="true"></i>Events
      </li>
      <li class="box">
        <i class="fa fa-database" aria-hidden="true"></i>Database
      </li>
      <li class="box"><i class="fa fa-cloud" aria-hidden="true"></i>Cloud</li>
      <li class="box">
        <i class="fa fa-comment-o" aria-hidden="true"></i>Feedback
      </li>
      <li class="box">
        <i class="fa fa-line-chart" aria-hidden="true"></i>Charts
      </li>
      <li class="box">
        <i class="fa fa-pencil-square-o" aria-hidden="true"></i>Form
      </li>
    </ul>
  </body>
</html>

```

```css
/* style.css */

/******************** Main Starts ********************/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans TC", sans-serif;
}

ul {
  width: 960px;
  /* margin: auto; */
  padding: 100px 0;
  display: flex;
  flex-wrap: wrap;
}

li {
  width: 200px;
  height: 200px;
  text-align: center; /* 文字水平置中 */
  line-height: 250px; /* 文字偏下 (垂直置中位置是 200px) */
  margin: 0px 60px -40px 60px;
  position: relative;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
}

li::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(45deg); /* pseudo elements 方塊旋轉 */
  z-index: -1; /* 讓 pseudo elements 別把文字蓋住了 */
}

li:nth-child(n + 4) {
  left: 160px;
}

li:nth-child(n + 7) {
  left: 0px;
}

.box::before {
  background-color: #5f9449;
  transition: 500ms;
}
/******************** Main Ends ********************/

/******************** Icon Starts ********************/
li .fa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 150px; /* icon 偏上 (垂直置中位置是 200px) */
  font-size: 40px;
  color: #fff;
}
/******************** Icon Ends ********************/

/******************** Hover Effects Starts ********************/
li:hover {
  cursor: pointer;
}

li:hover::before {
  background-color: #395d29;
}
/******************** Hover Effects Ends ********************/
```

### My Practice