Html 使用CSS3的带倾斜边框的Div？

我正在创建一个javascript小部件，用于调整相邻div的大小，以便在用户悬停在div上时显示更多的div背景图像。这非常简单，并且可以很好地处理具有直边的div（显然）。但是，边缘“需要”倾斜

有没有一种简单的方法可以使用css3在两个DOM元素之间创建倾斜边框

我遇到过css3变换（即倾斜）和对角边框技巧（使用半彩色、半透明），但这两种方法似乎都不能达到我所需要的效果

我试图达到的效果如下图所示：

---

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

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

但此解决方案需要旋转图像，这可能不适合您使用

---

第二种解决方案是使用一个图像和一个分隔符div作为旋转的边框。但在这种情况下，您可以在之前准备好合适的图像，而无需进行黑客攻击。

您可以从技术上将图像嵌入旋转的图像中（请参见CSS3的

变换：旋转（度）

）

，然后以相反的角度旋转嵌入的图像

或者，您可以使用SVG（与

）来实现此效果。另外，嵌入在

标记中的SVG可以使用JavaScript，因此响应部分可以成为整个过程的一部分

两人都在路上

EDIT1:CSS版本：

---

EDIT2:SVG版本：

我已经从我的角度尝试过了，也许这对您有帮助

HTML

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

​

---

选中此项仅用于选择示例图像。第二个选项不可行，因为边框从一侧滑动到另一侧时，边框图像需要更改。第一个选择我可能会尝试一下，我想我可以尝试反向旋转图像本身，以撤消div的旋转…谢谢大家的回答！不幸的是，优先级发生了变化，我还没有机会真正实现这些解决方案中的任何一个，但看看小提琴，我相信当我最终实现它时，它们会起作用的！

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