Nakładka na zdjęcia odwróconego trójkąta CSS

Question

Czy można zrobić coś takiego w CSS? Chcę obrazek do nagłówka, ale chcę, aby trójkąt został wycięty z następnej sekcji, tak aby obrazek powyżej był widoczny.

Wiem, jak utworzyć solidny trójkąt CSS z obramowaniem (coś podobnego do tego na przykład: http://www.dailycoding.com/Posts/purely_css_callouts.aspx), ale w tym przypadku muszę albo zrobić odwrotnie (wyjąć "kawałek" z niebieskiej części), albo spraw, aby trójkąt był obrazem, który w jakiś sposób pokrywa się dokładnie z obrazem, z którym jest połączony. Zastanawiam się, czy mogę wyjąć "kawałek", co może być łatwiejsze. Aby było to nieco bardziej skomplikowane, mam również powyższy obrazek ustawiony na background-attachment: fixed i background-size: cover. Obraz zmienia się, gdy rozmiar przeglądarki jest większy.

Jeśli nie mogę tego zrobić z samym CSS i potrzebuję obrazu, w jaki sposób mogę utworzyć odpowiednie kombinacje obrazów, aby trójkąt był zgodny z tekstem, jeśli tekst jest wyśrodkowany na stronie? Myślę, że coś takiego z dwoma długimi div „s, które rozciągają się na marginesie, a szerokość jednego dokładnym obrazem w środku trójkąta z przezroczystego:

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

Ale można to zrobić tylko z CSS? Czy może istnieje rozwiązanie SVG (nie jestem zaznajomiony z SVG)? Nie mam problemu z rozwiązaniem, które działa tylko w nowoczesnych przeglądarkach, ponieważ jest to zdecydowanie "stopniowe ulepszanie".

Answer 1

Oto zwrot na koncepcji trójkątów z granic.

• podstawowe: http://jsfiddle.net/nhqKb/
• bardziej szczegółowe: 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; 
} 

Alternatywa: Z transformacjami CSS zrobiłem coś podobnego (konkretnie, pochylenie). Zobacz CSS (3) & HTML Cut edge.

Answer 2

Pracowałem nad tym w inny sposób. Nie dokładnie to, co chce, ale wygląda dobrze i może pomóc komuś innemu.

Użyłem z-index i border-radius aby osiągnąć ten efekt

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

Można to zrobić bez większego dodatkowego oznakowania w ogóle za pomocą ::before i ::after. Potrzebujesz tylko overflow: hidden na pojemniku.

Biorąc

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

CSS byłoby

.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 */ 
} 

żywo przykład: http://codepen.io/aarongustafson/full/nutDB