星期三的CSS-CSSBattle#17

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

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

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

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

1. 這次一樣是向中間靠攏的概念，主要是四個圓形帶 border 的圖案組合。
2. 主要會分成三個部分，除了上下的粉色實心圓形以外，還有中間有連接處的深粉色區塊，主要還是會透過 grid 來進行排版。
3. 上下區塊會考慮透過 translate 的方式調整位移。
4. 中間區塊可能要測量一下高度，如果完全與圓形的直徑相等的話，會有溢出的色塊。

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

<div id="top" class="pink ball"></div>
<div class="mid">
  <div class="ball bg"></div>
  <div class="ball bg"></div>
</div>
<div id="bottom" class="pink ball"></div>

這邊透過 id 的方式調整上下的位移，class 的部分我有各別分開圓形與顏色更改的兩種命名概念，當然要寫在一起也是可以的：

body {
    margin: 0;
    display: grid;
    place-content: center;
    place-items: center;
    background: #09042A;
}
.ball {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}
.pink {
    background: #F5BB9C;
    border: 10px solid #09042A;
}
.mid {
    width: 200px;
    height: 50px;
    background: #E78481;
    border-radius: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bg {
    background: #09042A;
    border: 10px solid #E78481;
}
#top {
    translate: 0 12px;
}
#bottom {
    translate: 0 -12px;
}

中間的包覆色塊要確實去計算到包含 border 的寬度，高度的話就要透過工具去計算了。

技術總結

這題除了考驗基本的置中排版之外，有部分是關於圖形解構的能力，如果能很快速的想像和分離圓形圖案帶 border 與中間色塊的堆疊，就可以大幅縮短排版的難度，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !