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>

我可以看到以下CSS：

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

我希望能够做的是将图像(不扭曲)转换为基本房屋的形状,如下图所示： –

解决方法

最好的选择是使用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,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,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.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),因为你有填充：17px on .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,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>