- Published on
連續記錄挑戰Day10-7-Leafy Trail
- Authors
- Name
- Penghua Chen(PH)
Target #7- Leafy Trail
撰寫思維
水平及垂直置中方式一樣採用flex的語法達成。
圖形組合的思考則是將三個正方形的 左上及右下做border-radius圓角的設定,並透過 margin設定負值讓元素可以置於需求位置。
最後結果
附上 codepen(CSSBattle 目前無法透過附上連結看到別人所寫的程式碼,所以我另外寫在 codepen 方便點擊。可直接複製貼上即可查看結果)
這一關有使用到margin設定負值達成需求,而margin其實是可以設定負值的,但是**padding、border不行。**這一個部分在規範文件中有提到:
關於margin設定負值的測試會另篇記錄,之後在將連結補上。