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图
图片上方的文字我自己加的，可以无视之，关注本体的猴子动态图即可。
这是效果页面，这是源码页面。
参考链接
警告
本文最后更新于 February 19, 2021，文中内容可能已过时，请谨慎使用。
