是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #172 的問題來提供我的作法，那麼題目圖如下：
- 這次是類似海賊旗的交叉骷髏，會透過一個
wrapper來作為整個圖面置中的依據。 - 考慮將單一骨頭作為主要的
class，我會考慮用偽元素來處理掉兩個圓圈，另外的兩個圓圈會考慮放在骨頭的內部，透過定位來調整。 - 最後透過
transform的方式調整各別位移和旋轉角度。
下面的 html 是按照上述所描述的產出
<div class="wrapper">
<div class="stick a">
<div class="ball l"></div>
<div class="ball r"></div>
</div>
<div class="stick b">
<div class="ball l"></div>
<div class="ball r"></div>
</div>
</div>
外層置中的部分我採用 grid 方式來處理，個別的骨頭我簡單用 a & b 作為標記，這邊要小心 position 設定的參照物件，我是都去對準骨頭那層，那麼作法如下：
body {
margin: 0;
display: grid;
place-items: center;
background: #EFEB99;
}
.wrapper {
width: 200px;
height: 200px;
position: relative;
}
.a {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.b {
position: absolute;
top: calc(50% - 30px);
left: 50%;
transform: translate(-50%, -50%) rotate(135deg);
}
.stick {
width: 190px;
height: 30px;
border-radius: 50px;
background: #8647E6;
position: relative;
}
.stick::before {
content: "";
width: 30px;
height: 30px;
background: #8647E6;
position: absolute;
border-radius: 50px;
translate: -15px -15px;
}
.stick::after {
content: "";
width: 30px;
height: 30px;
background: #8647E6;
position: absolute;
border-radius: 50px;
right: 0;
translate: 15px -15px;
}
.ball {
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
background: #8647E6;
}
.l {
translate: -15px 15px;
}
.r {
right: 0;
translate: 15px 15px;
}
我這邊沒有更改 wrapper 的 display 方式，所以在調整 class b 的時候要做 calc，將原本圖面的高度給扣除，這樣交叉的位置才會在中心點。
技術總結
這次的圖形也可以看出對圖層拆解的熟練程度，當然你也可以將所有小圓拆開處理，讓直線的部分更加純粹，但還是脫離不了 position & transform 系列的使用技巧，如果熟練的話就可以大幅縮短排版的時間，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !
