html - 使用 CSS3 倾斜边框的 Div？

Question

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

有没有一种简单的方法使用 css3 在 2 个 DOM 元素之间制作倾斜边框？

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

我想要达到的效果就像这张图片：

Answer 1

您可以在技术上将您的图像嵌入到一个旋转的（参见 CSS3's transform: rotate(<X>deg)）<div/>中，然后以反向角度旋转嵌入的图像。

或者，您可以使用 SVG (with <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');
}

​</p>

检查这个http://jsfiddle.net/fZMuJ/5/

Answer 3

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

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

图片

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

第二种解决方案是使用一个图像和一个分隔符 div 只是一个旋转的边框。但是在这种情况下，无论如何您都可以在不需要破解之前准备适当的图像。