制作小三角有两种常用的方式，
1：是CSS3种的方法，通过旋转一个div元素45度，然后定位到外部div的某一边，把多余的用overflow：hidden;遮住，来获取一个三角形，但是这种方法兼容性不是很好，而且之前的浏览器也没有旋转属性，
2： 通过边框属性,来制作小三角.
我们可以看到,边框和边框之间是45度斜着分割的,如果我们把元素尺寸设置为0 ,仅仅留下边框,就能获得四个不同颜色的三角形.
如果想要留下某一个方向的小三角形，那就把其他三个方向的边框颜色全部设置为 : transparent (此属性是隐藏某个边框的颜色)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用边框做出来一个小三角</title> <style> /*制作边框小三角*/ body{ padding: 100px; } div{ width:0; height: 0; border:50px solid; border-color:transparent transparent red transparent; } </style> </head> <body> <div></div> </body> </html>