Achieve the css slanted image shape --image included

Question

how to get this effect using css , just interested in the slanted shape at the bottom of the image( circled yellow on the image above) any ideas much appreciated

Answer 1

There are two ways, one has poor browser support , the other is not very responsive design friendly.

Here the clip path approach:

 #imageContainer img:hover{
 background:violet;
 -webkit-clip-path: polygon(12% 6%, 29% 14%, 71% 8%, 
 91% 29%, 44% 35%, 54%   64%, 10% 92%, 5% 43%);
 clip-path: polygon(12% 6%, 29% 14%, 71% 8%, 
 91% 29%, 84% 85%, 54% 64%, 10%   92%, 5% 43%);
 }
 #imageContainer img {
-webkit-clip-path: polygon(1% 3%, 3% 9%, 18% 21%, 54% 20%, 
 83% 63%, 66%      76%,          15% 83%, 25% 45%);
clip-path: polygon(17% 13%, 33% 9%, 
58% 21%, 84% 20%, 83% 63%, 66% 76%, 15% 83%, 25% 45%);
-webkit-transition: -webkit-clip-path .6s ease-out;
transition: -webkit-clip-path .6s ease-out;
position:absolute;
border-radius: 5px;
width: 100%;
height:270px;

}

Keep in mind the elements position must be absolute or fixed, or clip path does not work.

There is also the "mask" property, now that has even poorer browser support and issues, just stay away for now.

The other approach would be just to apply a transform to the element, but that is no good solution imo.

Link to codepen, hover over the container element.

http://codepen.io/damianocel/pen/KdobyK

Answer 2

I was able to create something similar in Chrome using http://bennettfeely.com/clippy/ - but it didn't work in Firefox.

-webkit-clip-path: polygon(0% 98%, 100% 74%, 99% 1%, 1% 0%);
clip-path: polygon(0% 98%, 100% 74%, 99% 1%, 1% 0%);

An image cropped into a polygon just using CSS

Further reading suggests that these sorts of tags will have a variety of cross-browser issues that, depending on where you want to do this, you might not want.

Alternatively, you could just create a second image that's a white triangle with a pink top on a transparent background, and overlay it on top of your other image. If you then want a button on top of that, just make sure it has a z-score larger than your triangle's. See code snippet (using a black triangle to make it clearer):

<div style="position:relative; left: 0; top: 0;">
  <img style="position:relative; top: 0; left: 0; z-index: 0;" src="https://en.wikipedia.org/static/images/project-logos/enwiki.png">
  <img style="position:absolute; top: 110px; left: 0px; width: 135px; height: 40px; z-index: 1;" src="https://upload.wikimedia.org/wikipedia/commons/1/14/Black_right_angled_triangle_1.png">
</div>

Answer 3

This isn't as perfect as a clipping mask but has better browser support. You will need to prefix your transforms.

Codepen: http://codepen.io/anon/pen/jWxVBx

HTML:

<div class="container-skewed">
  <div class="bg-image"></div>
</div>

CSS:

.container-skewed {
  width: 100%;
  height: 500px;
  overflow: hidden;

  transform: skewY(-2deg);
  margin-top: -22px;
}

.bg-image {
  background-image: url('http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;

  transform: skewY(2deg) scale(1.09);
}

Set the size you want your container to be. Then skew it by a certain amount of degrees - I chose 2deg. Hide anything that overflows.

Take your background image and size / position it in the way you want. If you use the cover attribute, you will need to scale it up a bit to fill in the extra space.

Unskew the background image by putting the opposite of the skew you had on the .container.

Move the .container up to get rid of the white space in the upper left.

The last items of the CSS are the items you should play with depending on your skews.

The -webkit-backface-visibility: hidden; makes the jagged lines go away on Chrome. reference this thread if you are having further issues with transforms / jagged edges / antialiasing