# 稀飯版 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