纯CSS实现“三角形箭头”布局的代码
<!doctype html>
<html>
<head>
<title>纯CSS实现“三角形箭头”布局的代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
</head>
<body>
<div style="padding: 40px; background:#fff;">
<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;"> <span style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;" ></span> 纯CSS实现“三角形箭头”布局的代码</div>
<div style="position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px;"> <span style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;" ></span><span style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #FFF transparent;"></span>纯CSS实现“三角形箭头”布局的代码</div>
<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;"> <span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent red;"></span>纯CSS实现“三角形箭头”布局的代码</div>
<div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;"> <span style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border-width: 16px 24px; border-style: dashed dashed dashed solid; border-color: transparent transparent transparent red;"></span> <span style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border-width: 16px; border-style: dashed dashed solid dashed; border-color: transparent transparent #fff transparent;"></span>纯CSS实现“三角形箭头”布局的代码</div>
<div style="position: relative; background: red; width: 160px; padding: 20px; color: #fff; margin-bottom: 30px;"> <span style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: dashed dashed solid dashed; border-color: transparent transparent red transparent;"></span> 模拟梯形边<span style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border-width: 6px; border-style: solid dashed dashed dashed; border-color: red transparent transparent transparent;"></span> </div>
<h2>看看这个例子就会明白所谓“三角边”了</h2>
<div style="border-width:40px;border-style:solid;border-color:red green black blue;line-height:0;font-size:0;overflow:hidden;width:100px;height:0"></div>
<h2>把某些边透明掉就可以模拟三角形了，注意ie6下透明的边要是dotted或dashed</h2>
<div style="border-width:40px;border-style:dashed dashed solid dashed;border-color:transparent transparent red transparent; line-height:0; font-size:0; width:0; height:0"></div>
<div style="border-width:40px;border-style:dashed solid solid dashed;border-color:transparent blue red transparent;line-height:0;font-size:0;width:0;height:0"></div>
</div>
</body>
</html>
