div{ width:0; height: 0; line-height: 0; font-size: 0; border-left:10px solid purple ; border-right:10px solid green ; border-top:10px solid red ; border-bottom:10px solid blue ; }
其实原理就是做一个宽高为零的盒子，将边框宽度设置好，就可以得到任意大小的三角形，其中line-height: 0; font-size: 0;是考虑兼容性的，可以不写，
那么，我们要三角形是不是就很简单了，给其它三边颜色弄透明就可以了，我们可以得到各个方向的三角形。
例如：向上的三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:0; height: 0; line-height: 0; font-size: 0; border:10px solid transparent ; border-bottom:10px solid blue ; } </style> </head> <body> <div></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ position: relative; width: 200px; height: 400px; margin: 50px auto; background-color:skyblue; } .sj{ position: absolute; right: 50px; top: -20px; /*向上移动这个正方形的高，三角形底部正好就到了.box盒子上边*/ width:0; height: 0; line-height: 0; font-size: 0; border:10px solid transparent ; border-bottom:10px solid skyblue ; } </style> </head> <body> <div class="box"> <div class="sj"></div> </div> </body> </html>
