html - Flexible Triangular Box with patterns for divs above and below -
i need - if @ jsfiddle (http://jsfiddle.net/w9lnn/26/) can see need done.
<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; }
there triangle @ bottom of first div uses same background div within (in case purple pattern).
however, second div has image , because of way triangle has been made there white background between 2 divs.
is there way, without using images, create there no white space between 2 divs containing patterned image?
i put pattern in div surrounds other divs , use png triangle instead. png's can made have transparent areas
Comments
Post a Comment