星期三的CSS-CSSBattle#107

Lee Luciano

更新於 2024/04/24發佈於 2024/04/24閱讀時間約 6 分鐘

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

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

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

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

封印解除XD

會考慮用一個 wrapper 將整個圓形圖案置中，那我會比較習慣使用 grid 來處理。
頭和眼睛的部分我們可以把它想成同心圓的蓋念，利用圖層堆疊的原理來組合出圖案，可以想像成紅色環形上面蓋上一個白色環形加上羽毛的圖層。
嘴巴和頸部可以把它想成長條形的色塊，利用 border-radius 去調整呈現的形狀。
最後透過 translate 與 z-index 來調整顯示的位置。

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

<div class="wrapper">
  <div class="ring">
    <div id="top" class="wing"></div>
    <div id="mid" class="wing"></div>
    <div id="last" class="wing"></div>
  </div>
  <div class="mouth"></div>
  <div class="neck"></div>
  <div class="stick"></div>
</div>

這邊會透過 id 的方式去調整那三個羽毛的長短以及相對位移位置，那麼我們先來處理外層和 wrapper 的部分：

body {
    margin: 0;
    display: grid;
    place-items: center;
    background: #161616;
}
.wrapper {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 20px solid #A22015;
    position: relative;
}

這裡會將 wrapper 調整成 position: relative; 主要是方便後面調整其他色塊匡時有比較直覺的參照點，接下來我們來處理白色環形和羽毛的部分：

.ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 10px solid #FFFFFF;
    translate: -15px -15px;
    position: relative;
}
.wing {
    height: 12px;
    background: #FFFFFF;
    position: absolute;
    border-radius: 0 0 0 50px;
}
#top {
    width: 55px;
    translate: -55px -3px;
}
#mid {
    width: 40px;
    translate: -40px 9px;
}
#last {
    width: 25px;
    translate: -25px 21px;
}

這個部分可以透過平台的工具去計算寬度，位移的話會依照上面一層的 content 位置去長內層的內容，也就是說我如果要讓圓心重疊，那麼我就必需位移半徑長度的位置，算是一個計算上的小技巧，可以縮短你來回使用工具的時間。

羽毛的計算就比較土法煉鋼，除了高度以外(可以利用已知的高度計算)，剩下還得靠工具輔助。

上面處理完之後，剩下的色塊就相較容易許多，使用方法如下：

.mouth {
    width: 70px;
    height: 40px;
    background: #E96A23;
    position: absolute;
    translate: 20px -61px;
    border-radius: 0 40px 5px 0;
    z-index: -1;
}
.neck {
    width: 30px;
    height: 30px;
    background: #A22015;
    border-radius: 0 0 10px 10px;
    translate: -5px -17px;
    position: absolute;
    z-index: -1;
}
.stick {
    width:20px;
    height:200px;
    background: #E96A23;
    position: absolute;
    z-index: -2;
}

基本上還得靠點經驗才做得快一點，尤其是對於 border-radius 大小的判斷，剩下的操作和前面基本上是大同小異，最後再調整一下 z-index 就能完成了。

技術總結

這題主要考的應該就是圖層堆疊的使用，有部分是關於圖形解構的能力，如果 position 沒有定位好的話，可能會花很多時間在調整位移，再來就是對 border-radius 的熟悉度，有經驗的話應該猜的到大概是多少大小，但如果面試真的遇到這類題目，要有心理準備會花比較長的時間來處理位移定位，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !