CODEWITHSUNDEEP
htmlcssbordertransform
SaurabhLP
SaurabhLP

Reputation: 3657

Tilt Shaped Bordered Div in css3

i am trying to design a bordered shape div with css3 like a bordered square but tilted from the right hand side to some extend...

Here's what i am trying to design:-

https://i.sstatic.net/2Wcxi.png

I tried to skew the div by css3 transformation but it also skews the map also and content inside the div and skews both side of the 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 something to achieve this?

Upvotes: 0

Views: 4723

Answers (1)

SaurabhLP
SaurabhLP

Reputation: 3657

Just created this beauty from css3 transformation...

The trick, i implemented is skew the root container to 10deg and parent container to -10deg, and overflow hidden to the outer container and 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...

Upvotes: 6

Related Questions