码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS“三角边”的实现

时间:2015-06-26 10:53:35      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

<!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><br><hr>
    

 

纯CSS“三角边”的实现

标签:

原文地址:http://www.cnblogs.com/zhaozzm/p/4601648.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!