css三角形的实现
实底三角形:
<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>
如果觉得本文不错的话,帮忙点击下面的推荐哦,文章未经说明,均为原创,转载请注明出处,谢谢!