Making shaped viewport for pictures

Asked Jan 31 '14 at 20:25

Active Jan 31 '14 at 20:25

Viewed 60 times

I'm trying to make "skewed" shape as viewport window for pictures

Pic1 is what I want to make (I don't know how much pictures I will have)

enter image description here

Pic2 is the picture I use as base (background)

enter image description here

I'm using viewport window in CSS

.town_window{
width:190px;
height:165px;
-webkit-transform: skew(20deg); 
-moz-transform: skew(20deg); 
-o-transform: skew(20deg);
color: grey;
opacity: 0.7;
overflow: hidden;
}
#caluga{
background:url(images/caluga.jpg) no-repeat;
width: 277px;
height: 190px;
}

I'm getting scewed picture (I understand why), but I cannot figure out how to accomplish this task.

Please help ))

Thanks in advance, Alexei

asked Jan 31 '14 at 20:25

aleXela

1,270
2
21
34

Possible duplicate of http://stackoverflow.com/questions/14615492/css-skew-only-container-not-content – Madmenyo Jan 31 '14 at 20:32
Sorry, tried to search but without result! This is the solution I need. Thanks – aleXela Jan 31 '14 at 20:46
Your welcome! I searched for skewed div, since viewports are none existant in browsers, a div is what you place it into most probably ;) – Madmenyo Jan 31 '14 at 20:50
Got it! ) as always this is the best place to search – aleXela Jan 31 '14 at 20:56

Making shaped viewport for pictures

0 Answers0