是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #36 的問題來提供我的作法，那麼題目圖如下：
我的思維邏輯
- 這類工整的長條圖案會考慮使用，
Flex排版來處理。 - 再透過
nth-of-type的方式，選取偶數個單位做180度反轉和顏色的調整。
下面的 html 是按照上述幾個要點的結構
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
這次的圖面比較簡單，我們就直接往下處理版面配置的flex處理：
body {
margin: 0;
display: flex;
justify-content: space-evenly;
align-items: end;
background: #1A4341;
}
div {
width: 50px;
height: 200px;
border-radius: 25px 25px 0 0;
background: #F3AC3C;
}
div:nth-of-type(even) {
background: #998235;
translate: 0 -100px;
rotate: 180deg;
}
這裡我透過使用nth-of-type(even)的方式來選取雙數單位的樣式，並透過 translate 調整位移及 rotate 進行反轉。
技術總結
這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度，以及對nth-of-type的使用理解，當然你也可以透過下Id或class的方式去做微調，以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !
