星期三的CSS-CSSBattle#166

是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！

很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！

回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！

那麼我們這次從 #166 的問題來提供我的作法，那麼題目圖如下：

1. 這次的圖面我會分成上下兩塊處理，上下區塊的內部會考慮使用flex來排版。
2. 總是用 grid 來排版也有點膩，也怕被酸說是不是只會 grid，所以這次改用 flex 來解。
3. 圖面置中的部分我就採用簡單的 margin，在內部處理 flex 的排版。
4. 上面的部分就是三條槓，下面的話要有點想像力，用文字描述的話就是一個白色半圓形的底，上面平行陳列五個顏色相間的圓形色塊，只是剛好所有圓心在一條直線上，又直線剛好切期半圓形上方的直徑。

下面的 html 是按照上述所描述的產出

<div class="upper">
  <div class="bar"></div>
  <div class="mid"></div>
  <div class="bar"></div>
</div>
<div class="bottom">
  <div class="b"></div>
  <div class="b"></div>
  <div id="mid" class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>

下面的部分比較多 tag，所以我打算直接透過 :nth-child(even) 的方式去調整圓形的顏色，留有一個 id="mid" 方便我調整大小及位移，那麼全部的CSS如下：

body {
    margin: 0;
    background: #D86F45;
}
.upper {
    width: 200px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
}
.mid {
    width: 80px;
    height: 100px;
    background: #FDFBF8;
    border-radius: 0 0 50px 50px;
}
.bar {
    width: 30px;
    height: 125px;
    background: #FDFBF8;
    border-radius: 0 0 25px 25px;
}
.bottom {
    width: 200px;
    height: 100px;
    margin: 45px auto;
    background: #FDFBF8;
    border-radius: 0 0 100px 100px;
    display: flex;
}
.b {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FDFBF8;
    translate: 0 -15px;
}
.b:nth-child(even) {
    background:#D86F45;
}
#mid {
    width: 80px;
    height: 80px;
    translate: 0 -40px;
}

TIP: 圓心半徑位移參考量為直徑的一半，所以要成一直線的話要知道圓形的半徑會等於我們設的寬度的一半。

技術總結

這題除了考驗基本的常用排版之外，有部分是關於圖形解構的能力，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !