是的，身為前端工程師的基本功！還是需要時不時拿出來打磨一番！
很多大公司的切版與前端是分開的，但不能因為碰不到就不去理解，假如要系統性的調整樣式，那麼你就一定要懂基礎，就好像你要調整微前端的架構，總不能連包板工具的設定都不會吧！
回到正題，這系列文章每個禮拜三都會更新一題CSS Battle的題目，也歡迎想要學習或練習基礎切版的朋友們和我一起互動喔！
那麼我們這次從 #165 的問題來提供我的作法，那麼題目圖如下：
我的思維邏輯
- 將圖面置中。
- 拆分成圓形與三角形兩個類型區塊。
- 三角形部分要蓋在原型部分的上方。
下面的 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~ !
