（根据调节边框的宽度来调节三角形形状）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title> 演示代码 </title> <style> .a {width:0;height:0;border-left:50px solid transparent;border-right:50px solid transparent;border-bottom:100px solid red;} </style> </head> <body> <div class="a"> </div> </body> </html>
<div id="tri"></div> #tri{ width: 0px; height: 0px; border-top: 400px solid red; border-right: 400px solid blue; border-bottom: 400px solid green; border-left: 400px solid yellow; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .div{ font-size:16px; color:#fff; height: 0; width: 100px; line-height:30px; padding-left:5px; border-width: 0px 30px 30px 0px; border-style: none solid solid; border-color: transparent transparent #111; } </style> <body> <div class="div"></div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .trapezoid{ border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; width: 100px; } </style> </head> <body> <div class="trapezoid"></div> </body> </html>