css3如何画三角形transparent
来源:原创
时间:2015-08-26
作者:脚本小站
分类:CSS/HTML
用css画三角形的关键是border的transparent属性。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <style type="text/css"> /*箭头向上*/ .arrow-up { width:0; height:0; border-left:30px solid transparent; border-right:30px solid transparent; border-bottom:30px solid #fff; } /*箭头向下*/ .arrow-down { width:0; height:0; border-left:20px solid transparent; border-right:20px solid transparent; border-top:20px solid #0066cc; } /*箭头向左*/ .arrow-left { width:0; height:0; border-top:30px solid transparent; border-bottom:30px solid transparent; border-right:30px solid yellow; } /*箭头向右*/ .arrow-right { width:0; height:0; border-top:50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid green; } </style> </head> <body> <div> <!--向上的三角--> </div> <div> <!--向下的三角--> </div> <div> <!--向左的三角--> </div> <div> <!--向右的三角--> </div> </body> </html>