纯 CSS 实现矩形中的“三角块”特效代码

发布时间：2018-09-07 20:16:03 所属栏目：Unix 来源：站长网

导读：烈08火26网(LieHuo89.Net)CSS特效教56程，关于纯CSS实现三角，在以前的烈火曾经发表过两篇，有时间的朋友可以回顾一下。相关教程回顾： CSS border三角的一个应用实例用css的border属性实现三角效果看看上面的教程，再看看下面的例子就会明白所谓三角边

　　烈08火26网(LieHuo89.Net)CSS特效教56程，关于纯CSS实现三角，在以前的烈火曾经发表过两篇，有时间的朋友可以回顾一下。

　　相关教程回顾：

　　CSS border三角的一个应用实例
　　用css的border属性实现三角效果

　　看看上面的教程，再看看下面的例子就会明白所谓“三角边”了，把某些边透明掉就可以模拟三角形了，注意ie6下透明的边要是dotted或dashed。

　　代码演示：

<!doctype html> <html> <body> <h2>看看这个例子就会明白所谓“三角边”了</h2> <div style="border-width:40px;border-style:solid;border-color:red green black blue;line-height:0;font-size:0;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> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!