青年时鲁莽，老年时悔恨——富兰克林
代码如下：
<!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> .triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } </style> </head> <body> <div class="triangle"></div> </body> </html>
效果如下：
如果我们需要让三角形的箭头朝右，可以给一个旋转属性
.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; transform: rotate(90deg); }
效果
