张新旭老师几篇文章中常用的CSS图形绘制合集，小tips：纯CSS实现打字动画效果，分享纯CSS实现26个英文字母的三个案例，发现边框，border-radius,box-shadow一些特殊的用法，所以想到做一个总结。边框只写一侧。三角形{宽度：100px；border-top:100pxsolidred;}可以用同样的方法得到其他边。写边框，只写一侧top.triangle{width:100px;边框：100px纯黑色；border-top:100pxsolidred;}left.triangle{width:100px;边框：100px纯黑色；border-left:100pxsolidred;}写border同时写两侧.triangle{width:100px;边框：100px纯黑色；border-top：100px纯红色；border-bottom:100pxsolidblue;}从这里我们基本可以看到四个边，在此基础上可以做各种变形。比如文中提到的向下三角形，梯形等border-radius应用一个sidetop.triangle{width:100px;边框：100px纯黑色；border-top：100px纯红色；边界半径：200px000；}.triangle{宽度：50px;高度：50px；border-top:10px纯红色；border-radius:200px000;}hollow.triangle{width:50px;高度：50px；边框：50px纯黑色；radius:50px000;}应用两个sides.triangle{width:50px;高度：50px；border-top:10px纯红色；左边框：10px纯黄色；border-radius:100px;}应用四边圆Ring.triangle{width:50px;高度：50px；border-top:10px纯红色；border-radius:100px;}border-radius完整结构border-radius:1-4length|%/1-4length|%;“/”前四个值表示圆角的水平半径，后四个值表示圆角的垂直半径：gooseegg.triangle{width:50px;高度：50px；背景：浅粉色；border-bottom:10pxsolidblueborder-left:10pxsolidyellow;右边框：10px纯黑色；border-top:10px纯红色；边界半径：50%50%50%50%/60%60%40%40%;}box-shadow.triangle{宽度：50px;高度：50px；背景：浅粉色；盒子阴影：50px50px00紫色；}
