纯CSS小三角制作

无关的知识点

①

background-clip 属性规定背景的绘制区域。

1.padding-box：从padding区域（不含padding）开始向外裁剪背景。

2.border-box：从border区域（不含border）开始向外裁剪背景。

3.content-box：从content区域开始向外裁剪背景。

4.text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果。


②

clip

auto：对象无剪切rect(<number>|auto <number>|auto <number>|auto <number>|auto)：依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。

纯CSS三角形写法

<div id="triangle-up"></div>

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid yellow;
border-right: 50px solid green;
border-bottom: 100px solid red;
border-top: 50px solid blue;
}

结果如左图所示，原理也很见到那，width和height都是0所以只剩下一点，给点加上巨大的border就成了这个效果