我需要一些帮助——如果你看看这个 jsfiddle ( http://jsfiddle.net/w9LNN/26/ ) 你可以看到我需要做什么。
<div class="email-millions clearfix">
<h1>E-MAIL MILLIONS</h1>
<div class="top-border">
<div class="top-border-left"></div>
<div class="top-border-right"></div>
</div></div>
<div class="kindle-empire clearfix">
<h1 class="museo-300 text-center">div 2</h1>
</div>
CSS
.email-millions { background: #352f42 url('http://www.insiderinternetsuccess.com/wp-content/themes/iis/img/dark_blue_paper_BG.jpg');color: #fff;}
.kindle-empire { background: url('http://www.insiderinternetsuccess.com/wp-content/themes/iis/img/paper_BG-tile.jpg'); }
.top-border { width: 100%; position: relative; left: 0; }
.top-border-left { border-top-width: 30px; border-right-width: 0; border-bottom-width: 0; border-left-width: 800px; border-color: transparent transparent transparent #ffffff; float: left; }
.top-border-left { border-style: solid solid inset solid; width: 0; height: 0; }
.top-border-right { border-top-width: 0; border-right-width: 0; border-bottom-width: 30px; border-left-width: 800px; border-color: transparent transparent #ffffff transparent; float: right; }
.top-border-right { border-style: inset solid solid solid; width: 0; height: 0; }
.clearfix:before,.clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
第一个 div 的底部有一个三角形，它使用与它所在的 div 相同的背景（在我的例子中是紫色图案）。
但是，第二个 div 也有一个图像，并且由于三角形的制作方式，两个 div 之间有一个白色背景。
有没有办法在不使用图像的情况下创建它，以便在包含图案图像的 2 个 div 之间没有空白？