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

Question

我有以下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>

我可以看到以下CSS：

.page-id-11 .pimage {
  padding: 17px !important;
  background-color: #FFF;
}

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

Answer 1

最佳选择是使用svg。

定义内联svg clipPath（for maximum browser support）并将其应用于您的图片。

<svg width="200" height="200" viewBox="0 0 200 200">
  <defs>
    <clipPath id="shape">
      <path d="M100,0 L200,60 L200,200 L0,200 L0,60z" />
    </clipPath>
  </defs>
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://www.lorempixel.com/200/200" x="0" y="0" height="200px" width="200px" />
  </a>
</svg>

---

房子的真实形状：

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path d="M0.5,0 L0.74,0.145 L0.74,0.085 L0.80.085 L0.8,0.179 L1,0.3 L0.90,0.3 L0.90,1 L0.1,1 L0.1,0.3 L0,0.3z" />
    </clipPath>
  </defs>
</svg>

<svg width="300" height="300" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/300/300" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

---

在不同的图像尺寸上应用相同的clipPath：

您也可以将相同的clipPath应用于不同的图片尺寸。

以下是300×300,200×200,100×100,50×50,25×25,12.5×12.5和5×5图像尺寸的示例。

<svg width="0" height="0">
  <defs>
    <clipPath id="shape">
      <path d="M0.5,0 L0.74,0.145 L0.74,0.085 L0.80.085 L0.8,0.179 L1,0.3 L0.90,0.3 L0.90,1 L0.1,1 L0.1,0.3 L0,0.3z" />
    </clipPath>
  </defs>
</svg>

<svg width="300" height="300" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/300/300" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="200" height="200" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/200/200" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="100" height="100" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/100/100" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="50" height="50" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/50/50" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="25" height="25" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/25/25" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="12.5" height="12.5" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/12.5/12.5" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

<svg width="5" height="5" viewBox="0 0 1 1">
  <a xlink:href="#">
    <image clip-path="url(#shape)" xlink:href="http://placehold.it/5/5" x="0" y="0" height="1px" width="1px" />
  </a>
</svg>

---

要使图像适合website上的容器，如下图所示：

将您的svg代码更改为以下内容：

（注意：负边距（margin-top: -17px）已添加，因为padding: 17px上有.pimage） （通过做一些简单的数学计算得到了坐标）

<svg width="296" viewBox="0 0 1.286956522 1" height="230" style="margin-top: -17px;">
  <defs style="">
    <clipPath id="shape">
      <path d="M0.6434782609,0 L1.286956522,0.166666666667 L1.286956522,1 L0,1 L0,0.166666666667z"></path>
    </clipPath>
  </defs>
  <a xlink:href="#">
    <image y="-0.1" x="0" clip-path="url(#shape)" xlink:href="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg" height="1px" width="1.286956522px"></image>
  </a>
</svg>

Answer 2

您始终可以使用pseudo elements，例如：

＆＃13;

＆＃13;

div{
    position:relative;
    height: 230px;  /* image height */
    width: 330px;   /* image width */
}

div:before{
    content: '';
    position:absolute;
    top:0;
    left:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 100px 175px 0 0;         /* 175px = image width/2 */
    border-color: #ffffff transparent transparent transparent;
}

div:after{
    content: '';
    position:absolute;
    top:0;
    right:0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 175px 100px 0;
    border-color: transparent #ffffff transparent transparent;
}

＆＃13;

<div>
    <img src="http://nathandasilva.co.uk/butlinps/wp-content/uploads/2014/11/7-020130322113404-330x230.jpg" />
</div>

＆＃13;

＆＃13;

＆＃13;

JSFiddle