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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -