CSS圖形繪製總結

由張鑫旭大佬的幾篇文章
常見的CSS圖形繪製合集，
小tips: 純CSS實現打字動畫效果，
分享三個純CSS實現26個英文字母的案例，
發現了border，border-radius, box-shadow一些特殊用法，由此想到本身作個總結。

border

只寫一條邊

.triangle {
  width: 100px;
  border-top: 100px solid red;
}

同理可得其餘邊。

寫border，同時只寫一條邊

top

.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
}

left

.triangle {
    width: 100px;
    border: 100px solid black;
    border-left: 100px solid red;
}

寫border，同時寫兩條邊

.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
    border-bottom: 100px solid blue;
}

由此基本能夠看出四條邊的組成狀況，在此基礎上就能夠作出各類變形。好比，文章中提到的 向下三角， 梯形等

boder-radius

應用一條邊

top

.triangle {
    width: 100px;
    border: 100px solid black;
    border-top: 100px solid red;
    border-radius: 200px 0 0 0;
}

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-radius: 200px 0 0 0;
}

鏤空

.triangle {
    width: 50px;
    height: 50px;
    
    border: 50px solid black;
    border-radius: 50px 0 0 0;
}

應用兩條邊

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-left: 10px solid yellow;
    border-radius: 100px;
}

應用四條邊

圓環

.triangle {
    width: 50px;
    height: 50px;
    border-top: 10px solid red;
    border-radius: 100px;
}

border-radius完整結構

border-radius: 1-4 length|% / 1-4 length|%;

「/」 前的四個數值表示圓角的水平半徑，後面四個值表示圓角的垂直半徑:

鵝蛋

.triangle {
    width: 50px;
    height: 50px;
    background: lightpink;
    border-bottom: 10px solid blue;
    border-left: 10px solid yellow;
    border-right: 10px solid black;
    border-top: 10px solid red;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

box-shadow

.triangle {
    width: 50px;
    height: 50px;
    background: lightpink;
    box-shadow: 50px 50px 0 0 purple;
}