使用CSS3划分斜边框？

Question

我正在创建一个javascript小部件来调整邻近div的大小，以便在用户将鼠标悬停在其上时显示更多div的背景图像。这很简单，并且可以很好地处理具有直边（显然）的div。然而，边界“需要”倾斜。

是否有一种简单的方法使用css3在2个DOM元素之间形成倾斜的边界？

我遇到过css3转换（即倾斜）和对角边界技巧（使用半色，半透明度），但这些似乎都无法实现我所需要的。

我想要达到的效果就像在这张图片中一样：

Answer 1

您可以在技术上将图像嵌入旋转中（请参阅CSS3的transform: rotate(<X>deg)）<div/>，然后以相反的角度旋转嵌入的图像。

或者，您可以使用SVG（<clipPath>）来实现此效果。加上<object/>标签中嵌入的SVG可以使用JavaScript，因此响应部分可以成为骑行的一部分。

两个JSFiddle都在路上。

EDIT1：CSS版本：http://jsfiddle.net/kU3tu/
EDIT2：SVG版本：http://jsfiddle.net/b2JJK/

Answer 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/

Answer 3

我能想到的解决方案是使用两个绝对定位的图像和一个溢出设置为隐藏的div容器。

红色和绿色是图像（红色和绿色可以从顶部较短，绿色可以从底部较短，因为这些部分无论如何都不可见）。 蓝色是溢出的容器：隐藏。

Image

但是这个解决方案需要旋转图像，这可能不适合你使用。

第二种解决方案是使用一个图像，而分隔符div只是一个旋转的边框。但在这种情况下，你可以在不需要黑客攻击的情况下准备适当的图像。