利用css伪类:before和:after创建小三角型做法
下面有俩个border格式,效果图如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,user-scalable=no" /><title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <style> *{ margin:0px; padding:0px; } div{ width:50px; height:50px; margin:50px; box-shadow:0px 0px 0px 1px blue; text-align:center; line-height:50px; position:relative; } div:first-child:before{ content:""; width:0px; height:0px; position:absolute; right:-30px; top:10px; border-style:solid; border-color:red blue yellow black; border-width:15px 15px 15px 15px; } div:last-child:before{ content:""; width:0px; height:0px; position:absolute; right:-30px; top:10px; border-top:15px solid red; border-right:15px solid blue; border-bottom:15px solid yellow; border-left:15px solid black; } </style> </head> <body> <div>正</div> <div>反</div> </body> </html>
上面效果不难看出来 伪类部分被border(top right bottom left)分成了4个部分,分别有4个颜色显示,如果要实现三角形只需把其他3面的颜色值设置成transparent即可 这里伪类必须相对父级定位 不然left right不会是三角形 也可以用float进行浮动!