使用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/