2024-05-01|閱讀時間 ‧ 約 24 分鐘

星期三的CSS-CSSBattle#166

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

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

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

那麼我們這次從 #166 的問題來提供我的作法,那麼題目圖如下:

  1. 這次的圖面我會分成上下兩塊處理,上下區塊的內部會考慮使用flex來排版。
  2. 總是用 grid 來排版也有點膩,也怕被酸說是不是只會 grid,所以這次改用 flex 來解。
  3. 圖面置中的部分我就採用簡單的 margin,在內部處理 flex 的排版。
  4. 上面的部分就是三條槓,下面的話要有點想像力,用文字描述的話就是一個白色半圓形的底,上面平行陳列五個顏色相間的圓形色塊,只是剛好所有圓心在一條直線上,又直線剛好切期半圓形上方的直徑。

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

<div class="upper">
<div class="bar"></div>
<div class="mid"></div>
<div class="bar"></div>
</div>
<div class="bottom">
<div class="b"></div>
<div class="b"></div>
<div id="mid" class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>

下面的部分比較多 tag,所以我打算直接透過 :nth-child(even) 的方式去調整圓形的顏色,留有一個 id="mid" 方便我調整大小及位移,那麼全部的CSS如下:

body {
margin: 0;
background: #D86F45;
}
.upper {
width: 200px;
display: flex;
margin: 0 auto;
justify-content: space-between;
}
.mid {
width: 80px;
height: 100px;
background: #FDFBF8;
border-radius: 0 0 50px 50px;
}
.bar {
width: 30px;
height: 125px;
background: #FDFBF8;
border-radius: 0 0 25px 25px;
}
.bottom {
width: 200px;
height: 100px;
margin: 45px auto;
background: #FDFBF8;
border-radius: 0 0 100px 100px;
display: flex;
}
.b {
width: 30px;
height: 30px;
border-radius: 50%;
background: #FDFBF8;
translate: 0 -15px;
}
.b:nth-child(even) {
background:#D86F45;
}
#mid {
width: 80px;
height: 80px;
translate: 0 -40px;
}

TIP: 圓心半徑位移參考量為直徑的一半,所以要成一直線的話要知道圓形的半徑會等於我們設的寬度的一半。

技術總結

這題除了考驗基本的常用排版之外,有部分是關於圖形解構的能力,那麼以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

分享至
成為作者繼續創作的動力吧!
© 2024 vocus All rights reserved.