<!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" /> <title>利用border-width实现等腰直角三角形</title> <style> body{margin:0;background:#FFF} .d_a{width:100px;height:17px;margin:0 auto;border:1px solid #CCC;position:relative} .s_a{border-width:5px;border-style:solid;border-color:#000 #FFF #FFF #FFF;width:0;height:0;position:absolute;top:6px;right:3px;cursor:pointer;_overflow:hidden;} </style> </head> <body> <div class="d_a"> <span class="s_a"></span> </div> </body> </html>
?
修改border-color可实现4个方向的三角。