效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style> #tri{ width: 0; height: 0; border-top: 0 solid transparent; border-left: 10px solid transparent; border-bottom: 20px solid red; border-right: 10px solid transparent; background-color: white; } </style> </head> <body> <div id="tri"></div> </body> </html>
自己的理解（By8.13）：
三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也就是三角形的颜色，其余三边不设置颜色。
说白了就是，宽高设为0，只设置边框，用边框去填充。
拿上边的三角形说吧，尖朝上，所以上边的border为0，没边框。
颜色也就是下边框填充的。三角形的颜色也就是下边框的颜色。
如果想要设置三角形的大小，修改代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style> #tri{ width: 0; height: 0; border-top: 0 solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid red; border-right: 20px solid transparent; background-color: white; /*三角形的尖朝向那边，那边的对面就设置颜色，这个颜色也是三角形的颜色，其余三边不设置颜色*/ } </style> </head> <body> <div id="tri"></div> </body> </html>
效果为：
只需设置需要加宽的方向的border-width即可。
代码再次修改为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style> #tri{ width: 0; height: 0; border-top: 0 solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid red; border-right: 20px transparent; background-color: white; } </style> </head> <body> <div id="tri"></div> </body> </html>
看效果：
一个直角三角形就出来了，其他自己尝试了。
下面绘制空心三角形。（这个说白了也就用个背景颜色去挡住"空心"的地方）
效果图：
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>空心三角形</title> <style> .triangle{ width: 0; height:0; border-top: 0 solid transparent; border-bottom: 30px solid blueviolet; border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; } .triangleInner{ width: 0; height:0; border-top: 0 solid transparent; border-bottom: 28px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; left: -8px; top:2px; } </style> </head> <body> <div class="triangle"> <div class="triangleInner"></div> </div> </body> </html>
再次创新下代码为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>空心三角形</title> <style> .triangle{ width: 0; height:0; border-top: 0 solid transparent; border-bottom: 10px solid darkorange; border-left: 10px solid transparent; border-right: 10px solid transparent; position: relative; top:1px; left: 20px; } .triangleInner{ width: 0; height:0; border-top: 0 solid transparent; border-bottom: 8px solid white; border-left: 8px solid transparent; border-right: 8px solid transparent; position: absolute; left: -8px; top:2px; } .block{ width: 200px; height:100px; border:1px solid darkorange; text-align: center; line-height: 100px; border-radius: 10px; } </style> </head> <body> <div class="triangle"> <div class="triangleInner"></div> </div> <div class="block">hello world</div> </body> </html>
效果图wei：
