为图片制作异型视口

Question

我正在尝试使“倾斜”形状作为图片的视口窗口

Pic1是我想要制作的（我不知道要多少图片）

Pic2是我用作基础的图片（背景）

我在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;
}

我正在弄歪图片（我知道为什么），但是我无法弄清楚如何完成此任务。

请帮忙 ））

预先感谢，阿列克谢