[CSS+HTML]纯CSS “三角形箭头”Div边框代码
2014-08-22 10:33:25 -0400
代码复制
<!doctype html> <html> <head> <meta http-equiv="Content-Language" content="zh-CN"/> <mce:style type="text/css"><!-- span {_overflow:hidden;} .wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;} .arrow {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;} --></mce:style> <style type="text/css" _mce_bogus="1"> <!-- span {_overflow:hidden;} .wp {position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;} .arrow {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;} --></style> </head> <body> <div style="padding: 40px; background:#fff;" _mce_style="padding: 40px; background: #fff;"> <div class="wp"> <span class="arrow"></span>“三角形箭头”例1</div> <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent red transparent;"></span>“三角形箭头”例1</div> <div style="position: relative; border: 4px solid red; padding: 20px; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed 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;" _mce_style="position: absolute; left: 30px; top: -27px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent #FFF transparent;"></span>“三角形箭头”例2</div> <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed dashed solid transparent transparent transparent red;"></span>“三角形箭头”例3</div> <div style="position: relative; background: red; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 30px; top: -16px; width: 0; height: 0; font-size: 0; border: 16px 24px dashed dashed dashed solid 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;" _mce_style="position: absolute; left: 14px; top: -32px; width: 0; height: 0; font-size: 0; border: 16px dashed dashed solid dashed transparent transparent #fff transparent;"></span>“三角形箭头”例4</div> <div style="position: relative; background: red; width: 160px; padding: 20px; color: #fff; margin-bottom: 30px;" _mce_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;" _mce_style="position: absolute; left: 0px; top: -12px; width: 188px; height: 0; font-size: 0; border: 6px dashed dashed solid dashed 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;" _mce_style="position: absolute; left: 0px; bottom: -12px; width: 188px; height: 0; font-size: 0; border: 6px solid dashed dashed dashed 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" _mce_style="line-height: 0; font-size: 0; overflow: hidden; width: 100px; height: 0; border: 40px solid red green black blue;"></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" _mce_style="line-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed dashed solid dashed transparent transparent red transparent;"></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" _mce_style="line-height: 0; font-size: 0; width: 0; height: 0; border: 40px dashed solid solid dashed transparent blue red transparent;"></div> </div> </body> </html>
代码演示
“三角形箭头”例1
“三角形箭头”例1
“三角形箭头”例2
“三角形箭头”例3
“三角形箭头”例4
模拟梯形边
看看这个例子就会明白所谓“三角边”了
把某些边透明掉就可以模拟三角形了，注意ie6下透明的边要是dotted或dashed
«Newer
Older»
Comment:
Name:
Back to home
Subscribe
|
Register
|
Login
|
N