今天,我们来看一个用CSS制作小三角形的实例。这里用到的知识就是上次我们学到的border,具体代码如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ position: absolute; left:50px; top:50px; width: 0px; height:0px; border:40px solid white; border-top-color: red; border-right-color: blue; border-bottom-color: black; border-left-color: pink; }</style></head><body> <div></div></body></html>
运行完效果如下:
这里我们用div创建了一个白色的盒子,然后利用border-top/left/right/bottom更改颜色,实现了三角形的效果。自己动手试试吧😄