星期三的CSS-CSSBattle#151

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

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

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

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

1. 這次是棋子，從圖面上看來可以分成四個色塊，例如：頭部、頸部、身體、底座，這部分我會透過 grid 來排版。
2. 除了頭和身體的部分，其他的 border-radius 可能要再抓一下實際的 px 值。
3. 身體的部分會考慮使用overflow: hidden; 的方式處理色塊，但弧度的話可能要透過橢圓面積公式計算。

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

<div class="top"></div>
<div class="neck"></div>
<div class="body"></div>
<div class="bottom"></div>

接下來是CSS的部分，按照上述和平台的工具測量色塊的寬度和高度，如下：

body {
    background: #F5D6B4;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 5px;
}
div {
    background: #D86F45;
}
.top {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.neck {
    height: 20px;
    width: 80px;
    border-radius: 5px 5px 15px 15px;
}
.body {
    width: 90px;
    height: 65px;
    position: relative;
    overflow: hidden;
}
.body::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 136px;
    background: #F5D6B4;
    border-radius: 50%;
    translate: -95px -57px;
}
.body::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 136px;
    background: #F5D6B4;
    border-radius: 50%;
    translate: 65px -57px;
}
.bottom {
    height: 40px;
    width: 140px;
    border-radius: 20px 20px 10px 10px;
}

比較要注意的是身體部分我是透過偽元素的方式去蓋，在調整元素大小時，不能很簡單的以寬度和身體色塊的高度，直接生成橢圓形色塊去蓋，因為他的弧度並不相符，實際的弧度要遠遠大於生成的高度，這部分要花很多時間去算實際的寬高，不過這題的動機應該不會放在微小的弧度誤差上面。

技術總結

這題除了考驗基本的排版之外，還著重於圖形解構的能力，如果能理解身體的色塊是由兩個圓形堆疊在矩形之上，就可以大幅縮短排版的時間，當然實際上弧度差的計算會是要花掉更多的時間的，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !