为图片制作形状的视口

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

我正在拍照（我理解为什么），但我无法弄清楚如何完成这项任务。

请帮助））

提前致谢， 克塞