我正在创建一个 javascript 小部件来调整相邻 div 的大小，以便在用户将鼠标悬停在 div 上时显示更多的背景图像。这很简单，并且可以很好地与具有直边的 div 配合使用（显然）。但是，边缘“需要”倾斜。
有没有一种简单的方法使用 css3 在 2 个 DOM 元素之间制作倾斜边框？
我遇到过 css3 转换（即倾斜）和对角线边框技巧（使用半色半透明），但这些似乎都无法达到我的需要。
我想要达到的效果是这样的：
【问题讨论】：
标签： html css css-shapes
从技术上讲，您可以将图像嵌入到旋转的（参见 CSS3 的 transform: rotate(<X>deg)）<div/>，然后以反向角度旋转嵌入的图像。
或者，您可以使用 SVG（使用 <clipPath>）来实现此效果。另外，嵌入在<object/> 标签中的 SVG 可以使用 JavaScript，因此响应式部分可以成为其中的一部分。
两个 JSFiddle 都在路上。
EDIT1：CSS 版本：http://jsfiddle.net/kU3tu/
EDIT2：SVG 版本：http://jsfiddle.net/b2JJK/
【讨论】：
我已经尝试过，希望对你有帮助。
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');
}
【讨论】：
我能想到的解决方案是使用两个绝对定位的图像和一个将溢出设置为隐藏的 div 容器。
红色和绿色是图像（红色的可能比顶部更短，绿色的可能比底部更短，因为这些部分无论如何都不可见）。 蓝色是溢出的容器：隐藏。
但此解决方案需要旋转图像，这可能不适合您使用。
第二种解决方案是使用一个图像和一个分隔符 div 只是一个旋转的边框。但在这种情况下，无论如何您都可以事先准备好适当的图像，而无需 hack。
【讨论】：