使用CSS3倾斜边框的Div？

Question

我正在创建一个调整相邻div的JavaScript小部件，以便在用户悬停时显示更多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

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

红色和绿色是图像（红色可能是短距离，因为这些部件是不可见反正顶部和绿色之一可能是从底部短）。 蓝色是容器溢出：隐藏。

Image

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

第二种解决方案是使用一个图像和一个分离器的div仅仅是一个旋转的边框。但是在这种情况下，无论如何你都可以在不需要黑客的情况下准备适当的图像。

Answer 3

我已经从我身边试图可能这是帮助你。

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/