<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .caret0{ width:0; height:0; border: 5px solid #000; } .caret1{ width:0; height:0; border-top: 5px solid #000; border-left: 5px solid #fff; border-right: 5px solid #fff; border-bottom: 5px solid #000; } .caret2{ width:0; height:0; border-top: 5px solid #fff; border-left: 5px solid #f00; border-right: 5px solid #f00; border-bottom: 5px solid #fff; } .caret2{ width:0; height:0; border-top: 5px solid #fff; border-left: 5px solid #f00; border-right: 5px solid #f00; border-bottom: 5px solid #fff; } .caret3{ width:0px; height: 0px; border-bottom: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; } .caret4{ width:0px; height: 0px; border-right: 5px solid #000; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .caret5{ width:0px; height: 0px; border-top: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; } .caret6{ width:0px; height: 0px; border-left: 5px solid #000; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } </style> </head> <body> <h1>通过border的设置的三角形</h1> <div class="caret0"></div> <div class="caret1"></div> <br> <div class="caret0"></div> <br> <div class="caret1"></div> <br> <div class="caret2"></div> <br> 向上的三角形 <div class="caret3"></div> <br> 向左的三角形 <div class="caret4"></div> <br> 向下的三角形 <div class="caret5"></div> <br> 向右的三角形 <div class="caret6"></div> </body> </html>