{ PH_Dev }

Published on

連續記錄挑戰Day12-9-Tesseract

Authors
  • avatar
    Name
    Penghua Chen(PH)
    Twitter

Target #9- Tesseract

CSSBattle

撰寫思維

  • 圖形組合的思考參考示意圖，如下:

    • 由外往內為長方形 -> 正方形 -> 正方形 -> 圓形

  • 使用flex語法做區塊的水平及垂直置中:

    • a:垂直置中
    • b、c、d做水平及垂直置中

Tesseract

最後結果

Tesseract

附上 codepen(CSSBattle 目前無法透過附上連結看到別人所寫的程式碼，所以我另外寫在 codepen 方便點擊。可直接複製貼上即可查看結果)

#9 Tesseract