{ PH_Dev }

Published on

連續記錄挑戰Day16-#12-Wiggly Moustache

Authors
  • avatar
    Name
    Penghua Chen(PH)
    Twitter

Target #12- Wiggly Moustache

CSSBattle

撰寫思維

  • 圖形組合的思考參考示意圖，如下: 分為A、B、C 三個部分 ＋箭頭所指的兩個半圓(小)

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

  • border-width設定橘色部份的邊框

Wiggly Moustache

最後結果

Wiggly Moustache

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

#12 Wiggly Moustache

沒想到竟然能將CSSBattle這個網站的一個階段性目標達成，也透過這陣子的練習，讓自己對於圖形的組合又有更深的理解！