2024-03-20|閱讀時間 ‧ 約 23 分鐘

星期三的CSS-CSSBattle#163

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

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

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

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

  1. 首先我們先將圖面置中,這邊我會考慮使用 gird 的方式排版。
  2. 三個多邊形的部分會考慮使用before & after 搭配overflow: hidden;的修飾將圖形做出來。
  3. 最後將第一個元素作翻轉。

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

<div id="first"></div>
<div></div>
<div></div>

沒什麼特別的,三個多邊形就對應三個 div

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

body {
margin: 0;
display: grid;
place-content: center;
place-items: center;
grid-template-columns: 100px 100px;
background: #D669EC;
gap: 20px;
}

這邊 column 的寬度是按照多邊形的圖面寬去下的,大家可以考慮使用平台的工具去計算實際寬度。

再來,是我處理 div 的方法,也是按照上面想法去設定的:

div {
width: 100px;
height: 100px;
background: #FDFBF8;
position: relative;
overflow: hidden;
}
div::before {
content: "";
position: absolute;
width: 66px;
height: 66px;
background: #D669EC;
rotate: 45deg;
translate: -33px -33px;
}
div::after {
content: "";
position: absolute;
width: 66px;
height: 66px;
background: #D669EC;
rotate: 45deg;
translate: 67px 67px;
}
#first {
rotate: 90deg;
}

技術總結

這題除了考驗你對基本CSS常用排版的熟悉程度,再者是要考慮多邊形的呈現方式,我這邊示範的是透過偽元素的方式去遮罩,當然也可以多用一層 element 覆蓋處理,以上就是我的 100% 解法分享,一樣這題 100% 的解法絕對不會只有我這一種,大家也可以分享自己的作法與我交流,那麼我們下個禮拜三再見,Happy coding~ !

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