倾斜，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); 
} 

谢谢...