html - css3 中的倾斜形状边框 Div

Question

我正在尝试使用 css3 设计一个带边框的 div，就像一个带边框的正方形，但从右侧倾斜到一定程度......

这是我正在尝试设计的:-

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

我试图通过css3 转换 来扭曲 div，但它也会扭曲 map 和 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%; }

有什么方法可以实现吗？

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);
}

谢谢...