Html CSS-将图像转换为房子的形状

我有以下HTML：

<figure class="pimage">
  <a href="http://nathandasilva.co.uk/butlinps/property-item/schofield-road-loughborough-le11-4qj/">
    <img class="attachment-homeland_property_medium wp-post-image" width="330" height="230" alt="7-020130322113404" src="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg"></img>
  </a>
</figure>

我希望能够将图像（不失真）转换为基本房屋的形状，如下图所示：-

---

最好的选择是使用

svg

定义一个内联的

svg

clipPath

（）并将其应用于图像

---

您始终可以使用

伪元素，例如：


div{
位置：相对位置；
高度：230px；/*图像高度*/
宽度：330px；/*图像宽度*/
}
部门：以前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：100px 175px 0；/*175px=图像宽度/2*/
边框颜色：#ffffff透明；
}
部门：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 175px 100px 0；
边框颜色：透明#ffffff透明透明；
}

如果您将
img
标签放在锚
a
标签内。三角形是不可勾选的。@chipChocolate.py好吧，如果不改变标记，我怀疑这是可能的（对于纯CSS解决方案）。但是，如果OP愿意更改其标记，那么（我编辑了中给出的代码）。您是否可以使用jQuery查找最近的锚点，使其可以使用此方法单击？@nsilva在我的两个示例中，我都不使用jQuery。你可以使用它并使三角形部分可点击。相关问题：谢谢@chipChocolate.py-我在实际网站上有问题-你会明白我在这里的意思；不管怎样，我会得到尺寸，我会在几分钟内更新我的答案谢谢。我试图把它放在一个JSFIDLE中，但它是一个购买的主题，所以很难找到很多元素的来源，非常感谢@chipChocolate.py别担心！我喜欢做这种事。
.page-id-11 .pimage {
  padding: 17px !important;
  background-color: #FFF;
}