css绘制三角形
在盒子模型中border也占据了宽高，对于下面的样式：
1 2 3 4 5 6 7 | #div1{ width: 100px; height: 100px; border-style: solid; border-width: 100px 100px 100px 100px; border-color: red forestgreen blue cyan; } |
|---|
效果如下：
可以看到边框是由上下左右4个部分组成的，如果将div1的宽高设置为0，就变成如下效果：
可以发现边框变成了4个等腰直角三角形，如果继续将上边框的宽度设置为0，如下：
1 2 3 4 5 6 7 | #div1{ width: 0; height: 0; border-style: solid; border-width: 0 100px 100px 100px; border-color: red forestgreen blue cyan; } |
|---|
可以看到，上面的三角形不见了，而左右两个三角形变小了，所以可以通过设置4个边框宽度来自由调整三角形的形状。如果只需要其中某个三角形，只要将不需要的三角形颜色设置为透明即可，如下：
1 2 3 4 5 6 7 8 | #div1{ width: 0; height: 0; border-style: solid; border-width: 0 100px 100px 100px; border-color: transparent transparent blue transparent; } |
|---|
效果如下：
还可以通过设置不同的border-style来得到其他特殊的图形：
css绘制小猪佩奇
偶然看到的大佬的作品，这是效果页面，这是源码页面。
好看的404页面
猴子动态SVG图
图片上方的文字我自己加的，可以无视之，关注本体的猴子动态图即可。
这是效果页面，这是源码页面。
参考链接
- css如何将div画成三角形
- 用 CSS 画小猪佩奇，你就是下一个社会人！
- 分享一个404页面（猴子动态SVG图）
警告
本文最后更新于 February 19, 2021，文中内容可能已过时，请谨慎使用。
