星期三的CSS-CSSBattle#165

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

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

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

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

我的思維邏輯

1. 將圖面置中。
2. 拆分成圓形與三角形兩個類型區塊。
3. 三角形部分要蓋在原型部分的上方。

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

<div class="wrap">
  <div id="t" class="c"></div>
  <div id="l" class="c"></div>
  <div id="r" class="c"></div>
  <div class="t">
    <div class="it"></div>
  </div>
</div>

這裡的class 簡單以C代表圓型，T代表三角形的概念做簡寫，整個圖是以wrap做整合，那麼我們來看看置中的處理：

body {
    display: grid;
    place-items: center;
    background: #F0CD48;
    margin: 0;
}

接著，我們來處理wrap的部分：

.wrap {
    width: 300px;
    height: 240px;
    position: relative;
    display: grid;
    place-items: center;
}

這邊的置中，主要是為了處理內層的三角形部分，position: relative; 主要是方便三個圓形圖案的定位移動，讓我們繼續往下處理圓形的部分，從HTML的結構可以看出，我想要將位置和形狀的處理邏輯做個簡單分類，所以id的部分我會用來處理每個圓圈應該要放的位置，實作如下：

.c {
    width: 100px;
    height: 100px;
    background: #66284A;
    border-radius: 50%;
    position: absolute;
}
#t {
    top: 0;
    left: calc(50% - 50px);
}
#l {
    left: 0;
    bottom: 0;
}
#r {
    right: 0;
    bottom: 0;
}

最後，我們來處理三角形的部分，這邊使用的方法是直接切一個三角形來處理，這部分大家可以依照自己喜歡或習慣的方式來處理三角形，t的部分是外層的，it的部分是指內層的三角形，實作如下：

.t {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 140px solid #F0CD48;
    z-index: 1;
    position: relative;
}
.it {
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-bottom: 100px solid #66284A;
    position: absolute;
    top: 25;
    left: -70;
}

上面就是我個人的淺見解法啦！這題除了考驗怎麼解構圖案之外，也要理解 absolute 之後上下堆疊的順序，這題 100% 的解法絕對不會只有我這一種，大家也可以分享自己的作法與我交流，那麼我們下個禮拜三再見，Happy coding~ !