html - css3のチルト型のボーダー付きDiv

Question

css3 で縁取りされた正方形のように縁取りされた形状の divを設計しようとしていますが、右側からある程度まで傾いています...

これが私が設計しようとしているものです:-

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

css3変換でdivを歪めようとしましたが、マップとdiv内のコンテンツも歪め、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%; }

これを達成するための方法や何か？