Div ze skośnym obramowaniem za pomocą CSS3?

Question

Tworzę widget javascript, który zmienia rozmiar sąsiadujących elementów div, aby odsłonić więcej tła w tle, gdy użytkownik się na nim unosi. Jest to dość proste i działa ładnie z divami mającymi proste krawędzie (oczywiście). Jednak krawędź graniczna "potrzebuje", aby była nachylona.

Czy istnieje prosty sposób używania css3 do nachylonej granicy między dwoma elementami DOM?

Natknąłem się na transformacje css3 (a mianowicie skośne) oraz na ukośne obramowanie (używając półkoloru, półprzezroczystości), ale żadne z nich nie wydaje się być w stanie osiągnąć tego, czego potrzebuję.

Efekt staram się osiągnąć to, jak w tym obrazie:

Answer 1

Można technicznie osadzić obraz w obróconym (zobacz CSS3: transform: rotate(<X>deg)) <div/>, a następnie obrócić osadzony obraz pod kątem odwrotnym.

Alternatywnie można użyć SVG (z <clipPath>), aby uzyskać ten efekt. Plus SVG osadzone w tagach <object/> może korzystać z JavaScript, więc część responsywna może być częścią jazdy.

Obie JSFiddle są już w drodze.

Edit1: CSS wersja: http://jsfiddle.net/kU3tu/
EDIT2: SVG wersja: http://jsfiddle.net/b2JJK/

Answer 2

Rozwiązanie mogę myśleć jest użycie dwóch absolutnie pozycjonowane obrazów i kontener div z przelewem ustawioną na ukryte.

Czerwony i zielony to obrazy (czerwony może być krótszy od góry i zielony może być krótszy od dołu, ponieważ te części i tak nie są widoczne). Niebieski to kontener z przepełnieniem: ukryty.

Image

Ale to rozwiązanie wymaga obracania zdjęć, która może nie być odpowiedni dla użyć.

Drugim rozwiązaniem byłoby użycie jednego obrazu i separatora div będącego po prostu obróconą ramką. Ale w tym przypadku możesz przygotować odpowiedni obraz przedtem bez potrzeby hackowania.

Answer 3

Próbowałem z mojej strony może to pomóc.

HTML

<div class="container"> 
<div class="imageWrap ro"> 
    <div class="pic"></div> 
</div> 
<div class="imageWrap"> 
    <div class="pic2"></div> 
</div> 
</div>​ 

CSS

.container{ 
    width:600px; 
    height:400px; 
    border:1px solid red; 
    overflow:hidden; 
    white-space:nowrap; 
} 
.imageWrap{ 
    width:300px; 
    display:inline-block; 
    height:500px; 
    position:relative; 
    width:400px; 
    vertical-align:top; 
    margin-left:-70px; 
} 
.imageWrap.ro{ 
    border-right:5px solid red; 
    -webkit-transform:rotate(15deg); 
    -moz-transform:rotate(15deg); 
    transform:rotate(15deg); 
    overflow:hidden; 
    z-index:1; 
    margin-left:-100px; 
    margin-top:-80px; 
} 
.pic{ 
    background:url('http://lorempixel.com/output/nightlife-q-c-746-711-9.jpg'); 
    -webkit-transform:rotate(-15deg); 
    -moz-transform:rotate(-15deg); 
    transform:rotate(-15deg); 
    width:640px; 
    height:640px; 
    position:absolute; 
    left:-50px; 
} 
.pic2{ 
    width:400px; 
    height:400px; 
    background:url('http://lorempixel.com/output/sports-h-c-609-626-7.jpg'); 
} 

Sprawdź to http://jsfiddle.net/fZMuJ/5/