CSS实现“三角形箭头”布局的一些实例代码

　　CSS实现“三角形箭头”布局的一些实例代码，我想搞CSS的朋友都知道这个吧？在几年前还必须用图片实现的东西，现在用CSS就搞定了，不得不羡慕作者对CSS的执着。不过这绝对是一个好用的CSS技巧，使用它可有效减少因使用图片给页面带来的影响，有效提升网页加载性能。

　　特效代码：

<html><br /> <head><br /> <mce:style type="text/css"></mce:style><style type="text/css" _mce_bogus="1"></style><br /> </head><br /> <body><br /> <div style="padding: 40px; background:#fff;" _mce_style="padding: 40px; background: #fff;"><br /> <div class="wp"><br /> <span class="arrow"></span><br /> “三角形箭头”例1<br /> </div><br /> <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;"><br /> <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><br /> “三角形箭头”例1<br /> </div><br /> <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;"><br /> <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><br /> “三角形箭头”例2<br /> </div><br /> <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;"><br /> <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><br /> “三角形箭头”例3<br /> </div><br /> <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;"><br /> <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><br /> “三角形箭头”例4<br /> </div><br /> <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;"><br /> <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><br /> 模拟梯形边<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><br /> </div><br /> <h2>看看这个例子就会明白所谓“三角边”了</h2><br /> <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><br /> <h2>把某些边透明掉就可以模拟三角形了，注意ie6下透明的边要是dotted或dashed</h2><br /> <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><br /> <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><br /> </div><br /> <br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

CSS实现“三角形箭头”布局的一些实例代码

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

CSS实现“三角形箭头”布局的一些实例代码

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性