目录

分享一些有趣的前端图形和页面

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图

图片上方的文字我自己加的,可以无视之,关注本体的猴子动态图即可。

这是效果页面,这是源码页面

参考链接