Lớp phủ hình ảnh ngược tam giác CSS

Question

Có thể làm điều gì đó giống như trong CSS không? Tôi muốn một hình ảnh cho tiêu đề, nhưng tôi muốn hình tam giác đó cắt ra khỏi phần tiếp theo để hình ảnh bên trên hiển thị ở đó.

Tôi biết cách tạo tam giác CSS vững chắc với đường viền (ví dụ: http://www.dailycoding.com/Posts/purely_css_callouts.aspx), nhưng trong trường hợp này, tôi cần phải làm ngược lại (lấy một "đoạn" ra khỏi phần màu xanh), hoặc làm cho hình tam giác thành hình ảnh bằng cách nào đó sắp xếp chính xác với hình ảnh được kết nối. Tôi nghĩ rằng nếu tôi có thể lấy một "đoạn" ra, có thể dễ dàng hơn

Để làm cho nó phức tạp hơn một chút, tôi cũng có hình ảnh ở trên được đặt thành background-attachment: fixed và background-size: cover. Vì vậy, hình ảnh quy mô như kích thước trình duyệt được thực hiện lớn hơn.

Nếu tôi không thể làm điều đó với CSS một mình và cần một hình ảnh, làm cách nào tôi có thể tạo kết hợp hình ảnh phù hợp để giữ hình tam giác phù hợp với văn bản nếu văn bản được căn giữa theo chiều ngang trên trang? Tôi đang nghĩ đến một cái gì đó như thế này với hai div 'dài s mà mở rộng vào bên lề, và một hình ảnh chiều rộng chính xác ở giữa với hình tam giác trong suốt:

_____________________________ ___ ______________________ _________________________ 
| (really wide for margin)|| V (960px wide image) || (really wide box again) | 

Nhưng nó có thể được thực hiện chỉ với CSS? Hoặc là có lẽ một giải pháp SVG (tôi không phải là quen thuộc với SVG)? Tôi không sao với giải pháp chỉ hoạt động trong các trình duyệt hiện đại vì đây chắc chắn chỉ là "cải tiến nâng cao".

Answer 1

Đây là một bước ngoặt về khái niệm tam giác-từ biên giới.

• cơ bản: http://jsfiddle.net/nhqKb/
• Chi tiết thêm: http://jsfiddle.net/nhqKb/3/

HTML

<div id="container"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

CSS

#container{ 
    height: 300px; 
    background-color: red; 
    position: relative; 
} 

#one { 
    position: absolute; 
    width: 100px; 
    left: 0; 
    bottom: 0; 
    border-bottom: 20px solid green; 
    border-right: 20px solid transparent; 
} 

#two { 
    position: absolute; 
    left: 120px; 
    bottom: 0; 
    right: 0; 
    border-bottom: 20px solid green; 
    border-left: 20px solid transparent; 
} 

Một giải pháp thay thế: Tôi đã thực hiện điều gì đó tương tự với các biến đổi CSS (cụ thể, nghiêng). Xem CSS (3) & HTML Cut edge.

Answer 2

Tôi đã làm việc theo cách khác. Không chính xác những gì op muốn nhưng có vẻ tốt và có thể giúp người khác.

Tôi đã sử dụng z-index và border-radius để đạt được hiệu ứng này

DEMO

HTML

<div> 
    <img src="http://lorempixel.com/500/200/sports/" class="lowerpic"/> 
    <div class="leftupperdiv"></div> 
    <div class="rightupperdiv"></div> 
</div> 

CSS

.lowerpic { 
    z-index:-1; 
    position:absolute; 
} 
.leftupperdiv { 
    z-index:1; 
    position:absolute; 
    margin-top:150px; 
    width:100px; 
    height:50px; 
    border-radius: 0px 30px 0px 0px; 
    background-color: blue; 
} 
.rightupperdiv { 
    z-index:1; 
    position:absolute; 
    margin-top:150px; 
    margin-left:100px; 
    width:400px; 
    height:50px; 
    border-radius: 30px 0px 0px 0px;  
    background-color: blue; 
} 

Answer 3

Bạn có thể làm điều đó mà không cần đánh dấu thêm bất kỳ lúc nào bằng cách sử dụng ::before và ::after. Bạn chỉ cần overflow: hidden trên vùng chứa.

Với

<div class="hero"> 
    <img src="http://farm3.staticflickr.com/2431/3875936992_348d6dd86b_b.jpg" alt=""/> 
</div> 

CSS sẽ

.hero { 
    position: relative; 
    overflow: hidden; 
} 
.hero img { 
    display: block; 
    width: 960px; 
    height: auto; 
} 
.hero::before { 
    content: "\00A0"; 
    display: block; 
    border: 960px solid #fff; /* the width of the image */ 
    border-top-width: 0; 
    border-bottom-width: 0; 
    height: 30px; /* 1/2 the triangle width */ 
    width: 60px; /* the triangle width */ 
    position: absolute; 
    bottom: 0; 
    left: -630px; /* the left offset - the image width */ 
} 
.hero::after { 
    content: "\00A0"; 
    display: block; 
    border: 30px solid #fff; /* 1/2 the triangle width */ 
    border-top: 30px solid transparent; /* 1/2 the triangle width */ 
    border-bottom-width: 0; 
    height: 0; 
    width: 0; 
    position: absolute; 
    bottom: 0; 
    left: 330px; /* the left offset */ 
} 

Sống dụ: http://codepen.io/aarongustafson/full/nutDB