Div with slanted border using CSS3?

Question

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:

diaglonal border between dom elements

+1 simply for choice of example image. – Rory McCrossan Apr 18 '12 at 08:49 — Rory McCrossan, Apr 18 '12 at 08:49

Iso · Accepted Answer · 2012-04-18T09:41:51.260

8

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/

edited Apr 18 '12 at 09:41

answered Apr 18 '12 at 09:09

Iso

3,148
23
31

Thanks everyone for your answers! Unfortunately priorities change, and I've not had a chance to actually implement any of these solutions yet, but checking out the fiddles, I'm sure they'll work when I finally get to it! – David Downes Apr 20 '12 at 10:45

sandeep · Answer 2 · 2012-04-19T06:14:53.990

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/

score 1 · Answer 3 · answered Apr 18 '12 at 09:04

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.

The second option isn't feasible since the border image would need to change as the border slid from side to side. The first option I might well have a go at, I guess I could try and counter-rotate the image itself to undo the rotation of the div ... — David Downes, Apr 18 '12 at 09:09

Div with slanted border using CSS3?

3 Answers3