星期三的CSS-CSSBattle#160

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

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

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

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

1. 首先我們先將圖面置中，這邊我會考慮使用 gird 的方式排版。
2. 這邊我是考慮到實用性問題，所以很直覺的認為需要遮罩來處理紅色的區塊，但也是這一層思考會讓結構變得複雜一點。
3. 黃色為基底，紅色站黃色的四分之一大小。
4. 最內層再蓋上一個紫色圓形的色塊。

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

<div class="ring">
  <div class="red"></div>
  <div class="hole"></div> 
</div>

最外面那層的 ring 會是整塊元件的包覆層，所以會在上面下 position: relative; 來做為內層紅色區塊的定位，css 的解法大致如下：

body {
    margin: 0;
    background: #62306D;
    display: grid;
    place-items: center;
}
.ring {
    width: 200px;
    height: 200px;
    background: #F7EC7D;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    display: grid;
    place-items: center;
}
.hole {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #62306D;
    z-index: 1;
}
.red {
    width: 100px;
    height: 100px;
    position: absolute;
    background: #E38F66;
    top: 0;
    left: 0;
}

以上就是我自己最初構想的解法，但如果這個情境是發生在面試階段的話，其實不需要考慮應用層面問題，可以直接改用 border 處理就能快速解出這個圖案了，解法如下：

<div></div>
<style>
  body {
    background: #62306D;
    display: grid;
    place-items: center;
  }
  div {
    width: 120px;
    height: 120px;
    border: 40px solid #F7EC7D;
    border-radius: 50%;
    border-top-color: #E38F66;
    rotate: -45deg;
  }
</style>

技術總結

這題除了考驗圖層的堆疊應用以外，也考驗你對元件整合應用的概念，就如上述我所述的，多了一層遮罩，你能透過控制那個遮罩來更改覆蓋區域的大小，能擴大應用層面（ex: loading spin），但如果今天是在面試環節遇到這樣的問題，我還是建議用第二種思維來解題比較恰當，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !