html - Tilt Shaped Bordered Div in css3 -
i trying design bordered shape div css3 bordered square tilted right hand side extend...
here's trying design:-
http://i.imgur.com/6gvzltp.png
i tried skew div css3 transformation skews map , content inside div , skews both side of div
my demo:- http://jsfiddle.net/znsmg/
html code:-
<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%; }
any method or achieve this?
just created beauty css3 transformation...
the trick, implemented skew root container 10deg
, parent container -10deg
, , overflow hidden outer container , vice versa...
working 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); }
thanks...
Comments
Post a Comment