http://www.cssplay.co.uk/mozilla/rainbow.html

就是用两个border的接缝拼出斜线来，以前有类似例子，各个角度的斜线都能做出来哦。

</p> <style> <p>div#yellow {border-left:84px solid yellow; border-bottom:84px solid transparent;width:200px;height:200px;}</p> </style> <div id="yellow">this is div</div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

</p> <style> <p>div#yellow {border-left:30px solid purple; border-bottom:90px solid transparent;width:200px;height:200px;}</p> </style> <div id="yellow"></div> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

效果见 http://www.cssplay.co.uk/mozilla/splittext.html

代码简化如下：

</p> <style> <p>h1.split {font-size:2em; position:relative; font-family:georgia, "times new roman", serif; height:1em;}</p> <p>h1.split span.noline {position:absolute; left:0; top:0; color:#00a; height:0.6em; overflow:hidden;}</p> <p>h1.split:before {content:attr(title); position:absolute; left:0; top:0; color:#c60;}</p> </style> <h1 class="split" title="A TWO COLOR HEADING WITHOUT LINE"><span class="noline">A TWO COLOR HEADING WITHOUT LINE</span></h1> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

h1 position:relative（这样里面的postion:absolute的坐标系以该元素位置开始计算）；里面 span 高度减至 0.6em，溢出（overflow）部分隐藏；在前面（:before）加入同样内容（attr(title)），设置position 与原文字重叠。

BTW:没有设置 z-index 看来 :before 虽然在后，但z-index更低。

BTW:我记得以前 脚本代码 有类似例子，但不是这种方法。我想不起来了，自己找吧。

效果见这个 mozilla :target 例子，注意下面红色部分