Div with slanted border using CSS3? [duplicate] - html

Question

This question already has answers here:
Adjacent divs with angled borders? [duplicate]
(3 answers)
Closed 7 years ago.
I'm creating a javascript widget that resizes neighbouring divs, to reveal more of the div's background-image when the user hovers on it. This is simple enough, and working nicely with the divs having straight edges (obviously). However, the bordering edge 'needs' to be slanted.
Is there a simple way using css3 to make a slanted border between 2 DOM elements?
I have come across css3 transformations (namely, skew), and the diagonal border trick (using half colour, half transparency), but neither of these seem to be able to achieve what I need.
The effect I'm trying to achieve is like in this image:

Answer 1

You could technically embed your image in a rotated (see CSS3’s transform: rotate(<X>deg)) <div/>, and then rotate the embeded image with a reverse angle.
Alternatively, you could use SVG (with <clipPath>) to achieve this effect. Plus SVG embedded in <object/> tags can use JavaScript, so the responsive part can be part of the ride.
Both JSFiddle are on their way.
EDIT1: CSS Version: http://jsfiddle.net/kU3tu/
EDIT2: SVG Version: http://jsfiddle.net/b2JJK/

Answer 2

I have tried from my side may that's help you.
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');
}
​
Check this http://jsfiddle.net/fZMuJ/5/

Answer 3

The solution I can think of is to use two absolutely positioned images and a div container with overflow set to hidden.
The red and green are images (red one could be shorter from the top and green one could be shorter from the bottom as these parts are not visible anyway).
Blue is the container with overflow:hidden.
Image
But this solution requires rotating the images, which might not be right for you use.
The second solution would be to use one image and a separator div being just a rotated border. But in this case you could prepare appropriate image before anyway without the need for hacks.