实底三角形：
<html> <head> <title></title> <style type="text/css"> a{ display: block; width: 0; height: 0; border-left: 50px solid transparent; /*左边框实现透明;50ppx是三角形左边框的宽度*/ border-right: 50px solid transparent; border-bottom: 100px solid red; } </style> </head> <body> <a href=""></a> </body> </html>
透明三角形：
原理：用俩个三角形进行叠加
<html> <head> <title></title> <style type="text/css"> a:before{ top:0; left:0; content: ''; position: absolute; display: block; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; } a:after{ top:1px; left:2px; content: ''; position: absolute; display: block; width: 0; height: 0; border-left: 48px solid transparent; border-right: 48px solid transparent; border-bottom: 48px solid #fff; } a{ position: relative; } </style> </head> <body> <a href="">1111</a> </body> </html>