[英]Tilt Shaped Bordered Div in css3
我正在尝试使用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%; }
有什么方法或实现此目的的方法吗?
刚刚从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);
}
谢谢...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.