Div с наклонной границей с помощью CSS3?

Я создаю виджет javascript, который изменяет размеры соседних divs, чтобы показать больше фонового изображения div, когда пользователь на него наводится. Это достаточно просто и прекрасно работает с разделителями, имеющими прямые края (очевидно). Тем не менее, граничный край "нуждается" в наклоне.

Есть ли простой способ использовать css3 для создания скошенной границы между двумя элементами DOM?

Я столкнулся с css3-трансформациями (а именно, с перекосом) и диагональным уловкой границы (используя половину цвета, половину прозрачности), но ни один из них, похоже, не может достичь того, что мне нужно.

Эффект, который я пытаюсь достичь, похож на этот образ:

Ответ 1

Вы можете технически встроить свое изображение в повернутое (см. CSS3s transform: rotate(<X>deg)) <div/>, а затем повернуть вложенное изображение с обратным углом.

В качестве альтернативы вы можете использовать SVG (с <clipPath>) для достижения этого эффекта. Плюс SVG, встроенный в теги <object/>, может использовать JavaScript, поэтому отзывчивая часть может быть частью поездки.

Оба JSFiddle находятся на пути.

EDIT1: Версия CSS: http://jsfiddle.net/kU3tu/
EDIT2: Версия SVG: http://jsfiddle.net/b2JJK/

Ответ 2

Я пытался с моей стороны помочь вам.

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');
}

Отметьте http://jsfiddle.net/fZMuJ/5/

Ответ 3

Решением, которое я могу придумать, является использование двух абсолютно позиционированных изображений и контейнера div с переполнением, установленным в скрытое.

Красный и зеленый - это изображения (красный цвет может быть короче сверху, а зеленый - короче, поскольку эти части не видны в любом случае). Синий - контейнер с переполнением: скрытый.

Изображение

Но это решение требует поворота изображений, что может оказаться неправильным для вас.

Второе решение - использовать одно изображение, а разделитель div - только повернутая рамка. Но в этом случае вы могли бы подготовить соответствующее изображение до того, как это было возможно, без необходимости взлома.