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;
}