星期三的CSS-CSSBattle#38

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

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

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

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

1. 這次的圖案比較簡單一點，是單純色塊的堆疊，排版也不需要考慮置中。
2. 黃色方塊和右邊的長條色塊可以透過 flex 排版處理，下面的長條就按照 block 排版就行了。
3. 長條色塊的深色部分會考慮用背景漸層的方法處理。

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

<div class="flex">
  <div class="square"></div>
  <div class="right"></div>
</div>
<div class="bottom"></div>

上面有將方塊和右邊的紅色長條色塊，作為橫向排版的處理，所以加了一層 flex ，剩下的CSS就如上述的概念處理，如下：

body {
    margin: 0;
    background: #293462;
}
.flex {
    display: flex;
}
.square {
    width: 200px;
    height: 200px;
    background: #FFF1C1;
}
.right {
    width: 100px;
    height: 200px;
    background: linear-gradient(to bottom, #FE5F55 150px, #A64942 150px);
}
.bottom {
    width: 200px;
    height: 100px;
    background: linear-gradient(to right, #FE5F55 150px, #A64942 150px);
}

技術總結

這次的圖形比較簡單，透過背景漸層的觀念處理會快一點，如果熟練的話就可以大幅縮短排版的時間，基本上如過面試遇到這樣的題型絕對是送分的，那麼以上就是我的 100% 解法分享，一樣這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !