傾斜，CSS3

Question

我試圖設計一個邊框的形狀DIV用CSS3狀形狀的邊距股利帶邊框的正方形，但是從右側在一定程度上傾斜...

這裏就是我試圖設計： -

http://i.imgur.com/6GVzltP.png

我試圖通過CSS3轉換歪斜的股利，但它也歪斜的地圖也和內容DIV中和歪斜的股利

的兩側

我演示： -http://jsfiddle.net/znsmG/

HTML代碼： -

<div class="map_canvas"> 
    <div class="map_area" data-showcontrols="true" data-lat="-34.397" data-lng="150.644" data-zoom="7"></div>   
</div> 

的CSS： -

.map_canvas { border: 10px solid #d2d828; position:relative; } 
.map_area { height: 400px; width:100%; } 

任何方法或東西來實現這一目標？

Answer 1

剛剛創建這種美來自CSS3轉換 ...

訣竅，我實行的是扭曲的根容器10deg和父容器-10deg和溢出隱藏到外部容器，反之亦然.. 。

工作演示： -http://jsfiddle.net/znsmG/3/

的CSS： -

.map_contain { 
    border-left: 10px solid #D2D828; 
    overflow: hidden; 
} 
.map_canvas { 
    border-bottom: 10px solid #D2D828; 
    border-right: 10px solid #D2D828; 
    border-top: 10px solid #D2D828; 
    margin: 0 40px 0 -40px; 
    overflow: hidden; 
    position: relative; 
    transform: skewX(10deg); 
    -moz-transform: skewX(10deg); 
    -webkit-transform: skewX(10deg); 
} 
.map_area { 
    height: 400px; 
    margin: 0 -35px 0 40px; 
    transform: skewX(-10deg); 
    -moz-transform: skewX(-10deg); 
    -webkit-transform: skewX(-10deg); 
} 

謝謝...