是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #76 的問題來提供我的作法，那麼題目圖如下：
那麼接下來是我的解題思維
- 讓圖案中的蜜蜂置中這件事
- 將蜜蜂圖案分成上下 (翅膀和身體) 兩個部分
- 翅膀可以看成兩個圓形和一個長方形的白色色塊堆疊組合
- 身體部分是一個藥丸形狀上面覆蓋線條與原點的堆疊組合
下面的 html 是按照上述幾個要點的結構
<div>
<div class="w">
<div class="wing"></div>
<div class="wing"></div>
<div class="t"></div>
</div>
<div class="bee">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="dot"></div>
</div>
</div>
首先的置中這件事我是採用 gird 的方法處理，原因是最短，當然大家可以按照自己喜好去做即可：
body {
margin: 0;
padding: 0;
background: #998235;
display: grid;
place-items: center;
}
翅膀的部分如下：
.w {
width: 150px;
height: 75;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
}
.t {
position: absolute;
width: 75;
height: 75;
background: #FFFFFF;
transform: rotate(45deg);
bottom: -50;
}
.wing {
width:75;
height:75;
background: #FFFFFF;
border-radius: 50%;
}
身體的部分如下：
.bee {
width: 150;
height: 75;
background: #EFF33C;
border-radius: 50px;
position: relative;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: center;
}
.bar {
width: 25;
height: 75;
background: #191919;
margin: 0 10px 0 0;
}
.dot {
width: 15;
height: 15;
background: #191919;
border-radius: 50%;
position: absolute;
right: 20;
top: 20;
}
上面就是我個人的淺見解法啦！以我來看這題的核心就在考驗怎麼解構圖案，然後熟用 position 來做定位的調整，這就考驗你對DOM上下階層的理解和安排，絕對不是無腦使用 absolute 就能夠達成100%的作法，也可以分享大家自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ bye^2 !
