星期三的CSS-CSSBattle#76

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

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

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

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

那麼接下來是我的解題思維

1. 讓圖案中的蜜蜂置中這件事
2. 將蜜蜂圖案分成上下 (翅膀和身體) 兩個部分
3. 翅膀可以看成兩個圓形和一個長方形的白色色塊堆疊組合
4. 身體部分是一個藥丸形狀上面覆蓋線條與原點的堆疊組合

下面的 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 !