Question

我需要一些帮助 - 如果你看看这个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之间没有空白区域？

Answer 1

我会将你的模式放在一个围绕你所有其他div的div中，而是使用png代替你的三角形。 PNG可以制作透明区域

灵活的三角形盒子，上面和下面的div模式

1 个答案: