- Published on
連續記錄挑戰Day07-#5-Acid-Rain
- Authors
- Name
- Penghua Chen(PH)
Target #5 - Acid Rain
撰寫思維
水平以及垂直置中方式和前面幾關的方式相同,都是使用flex語法完成。
使用border-radius語法對於元素的三個角(左上、右下、左下)做設定,而右上則不設定。
將容器(此指的是程式碼中的wrap)旋轉45度。
最後結果
附上 codepen(CSSBattle 目前無法透過附上連結看到別人所寫的程式碼,所以我另外寫在 codepen 方便點擊。可直接複製貼上即可查看結果)
關於border-radius,除了可以直接在此語法對四個角做設定之外,也可以透過下列的語法達成。
- border-top-left-radius 針對左上做圓角的設定
- border-top-right-radius 針對右上做圓角的設定
- border-bottom-left-radius 針對左下做圓角的設定
- border-bottom-right-radius 針對右下做圓角的設定
REF : w3schools