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

<figure >  <a href="http://nathandasilva.co.uk/butlinps/property-item/schofIEld-road-loughborough-le11-4qj/">    <img  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" >  <defs >    <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>

总结

以上是内存溢出为你收集整理的html – CSS – 将图像转换为房屋的形状全部内容，希望文章能够帮你解决html – CSS – 将图像转换为房屋的形状所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。