Css 创建图形化视口

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

图1是我想要制作的（我不知道我会有多少照片）

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

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

我知道这是为什么，但我不知道如何完成这项任务

请帮忙

提前感谢,，

---

Alexei

可能重复抱歉，尝试搜索但没有结果！这就是我需要的解决方案。谢谢你的欢迎！我搜索了歪斜的div，因为浏览器中不存在视口，所以div很可能就是您放置它的位置；）明白了一如既往，这是最好的搜索地点