星期三的CSS-CSSBattle#167

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

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

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

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

我的解題思維

1. 一樣先想辦法置中圖面。
2. 所見即所得，大致將藍色的原子中心與外面堆疊的橢圓形環做分類。
3. 堆疊的部分可以考慮使用 absolute 的方式做旋轉堆疊。
4. 從圖可知紅色環應該要在最上面，白色環應該要在最下面。

下面的 html 是按照上述幾個要點的結構

<div class="c"></div>
<div class="ring"></div>
<div id="green" class="ring" ></div>
<div id="red" class="ring"></div>

首先的置中這件事我是採用 gird 的方法處理，原因是最短，當然大家可以按照自己喜好去做即可：

body {
    display: grid;
    place-items: center;
    background: #0D1335;
    margin:0;
}

接著，我們來處理中心點的藍色圓圈：

.c {
    width: 40px;
    height: 40px;
    background: #73C6EA;
    border-radius: 50%;
}

然後，我們處理環形圈的部分，這裡我考慮用id 的方式去抓取紅色與綠色環的微調，當然也可以考慮使用同為 class 的方式去處理，會這麼做的原因就是讓大家一目瞭然：

.ring {
    width: 230px;
    height: 90px;
    border: 10px solid #FBFAE2;
    border-radius: 50%;
    position: absolute;
}
#green {
    rotate: -60deg;
    border-color: #4FA07B;
}
#red {
    rotate: 60deg;
    border-color: #DC6638;
} 

上面就是我個人的淺見解法啦！這題除了考驗怎麼解構圖案之外，也要熟用 rotate 及理解 absolute 之後上下堆疊的順序，這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !