兼容并受

xhtml+css实现对角线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>xhtml+css实现对角线</title> <style type="text/css"> .clsss_div{ width:0; height:0; border-top:100px solid #ccc; border-left:100px solid #666; position:relative} .clsss_div p{ position:absolute; background:#CC3300; top:-70px; left:-50px} .clsss_div em{ position:absolute; background:#CC3300; top:-40px; left:-100px} </style> </head> <body> <div class="clsss_div"> <p>top</p> <em>bottom</em> </div> </body> </html>

提示：你可以先修改部分代码再运行。

原理：
当border的相邻颜色不同时，相交的地方是斜线。放大这个相交的地方，就是斜线了。然后绝对定位被嵌套的元素形成表头。

随机日志

2009年3月1日15:39

分类: web标准化

标签: xhtml+css, 对角线, 斜线

订阅评论

307 views | 发表评论 | Trackback

« Ie6的a:hover不响应的bug解决办法 JS控制DIV显示隐藏问题，兼容各浏览器 »

目前还没有任何评论.

xhtml+css实现对角线

随机日志

发表评论

分类目录

最近文章

一堆标签

链接

Bookmarks