Search code examples
htmlcsscss-shapes

CSS - Convert image into the shape of a house

I have the following 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>

With the following CSS from what I can see:

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

What I want to be able to do is convert the image (without distorting it) to the shape of a basic house, like the image below:-

enter image description here

Solution

  • Best option is to use svg.

    Define an inline svg clipPath(for maximum browser support) and apply it on your image.

    <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>

    A Real Shape of House:

    <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>

    Applying same clipPath on different Image Sizes:

    You could also apply the same clipPath to different image sizes.

    Below is an example on 300×300, 200×200, 100×100, 50×50, 25×25, 12.5×12.5 and 5×5 image sizes.

    <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>

    To fit the image in the container on your website, like the image below:

    enter image description here

    Change your svg code to following:

    (Note: Negative margin(margin-top: -17px) was added because you have padding: 17px on .pimage) (The co-ordinates were achieved by doing some simple math)

    <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>