共计 1369 个字符，预计需要花费 4 分钟才能阅读完成。
由张鑫旭大佬的几篇文章常见的 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;
}
