2024-02-07|閱讀時間 ‧ 約 22 分鐘

星期三的CSS-CSSBattle#29

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

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

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

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

我的思維邏輯

  1. 利用四個圓角矩形組成上面的圖案。
  2. 會利用grid的方式來調整對齊。

下面的 html 是按照上述幾個要點的結構

<div></div>
<div></div>
<div></div>
<div></div>

這次的圖面比較簡單,我們就直接往下處理版面配置的grid處理:

body {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
background: #1A4341;
}
div {
width: 100%;
height: 100%;
background: #F3AC3C;
}
div:nth-of-type(1) {
border-radius: 0 0 100px 0;
}
div:nth-of-type(2) {
border-radius: 0 0 0 100px;
}
div:nth-of-type(3) {
border-radius: 0 100px 0 0;
}
div:nth-of-type(4) {
border-radius: 100px 0 0 0;
}

這裡我透過使用nth-of-type的方式來調整四個網格區域的border-radius

技術總結

這題除了考驗怎麼解構圖案之外,這裡也考驗對 grid 或是 flex 的熟悉程度,以及對 nth-of-type的使用理解,當然你也可以透過下Id的方式去做微調,以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

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