星期三的CSS-CSSBattle#172

Lee Luciano

2024/06/12 更新2024/06/12 發佈閱讀 5 分鐘

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

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

回到正題，這系列文章每個禮拜三都會更新一題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~ !

留言