Geek Answers Handbook

CSS - Converting an Image into a House Shape

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>

Using the following CSS from what I see:

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

What I want to do is convert the image (without distorting it) into the shape of the main house, as shown below: -

enter image description here

+7
html css css3 css-shapes
source share
2 answers

The best option is to use svg .

Define the built-in 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>

Real house shape:

 <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 the same clipPath to different image sizes:

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

Below is an example of sizes of 300 × 300, 200 × 200, 100 × 100, 50 × 50, 25 × 25, 12.5 × 12.5 and 5 × 5 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 place an image in a container on a website , as shown in the image below:

enter image description here

Change the svg code as follows:

( Note: Added negative margin ( margin-top: -17px ) since you have padding: 17px on .pimage ). (Coordinates were achieved by doing 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>
+12
source share

You can always use pseudo elements , for example:

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

Jsfiddle

+5
source share

More articles:


All Articles