Tilt forme Bordée Div dans css3

Question

je suis en train de concevoir un côté forme Aréolées div avec CSS3 comme une place bordée mais inclinée du droit à une certaine mesure ...

Voici ce que je suis en train de concevoir : -

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

J'ai essayé de biaiser la div par transformation css3 mais il biaise aussi la carte aussi et contenu à l'intérieur du div et biaise les deux côtés de la div

Ma démo: -http://jsfiddle.net/znsmG/

Code 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%; } 

Toute méthode ou quelque chose pour y parvenir?

Answer 1

venons juste de créer cette beauté de transformation css3 ...

L'astuce, je mis en œuvre est biaiser le conteneur racine à 10deg et conteneur parent à -10deg, et trop-plein caché au réservoir extérieur et vice versa .. .

travail Demo: -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); 
} 

Merci ...