-2

I need to create a slope/angled element, so I tried skew() transform. Inside this element I have an image which I want to cover the whole area of parent element, but when I applied skew() to image to make it straight, the image is not fully covered. I know I can use scale() transform to cover the image but thats blur my image. What I am looking for is below image.

enter image description here

Is there any another way to do this?

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: flex;
  overflow: hidden;
  flex-wrap: wrap;
  margin: 0 -30px;
}

.container a {
  border: 3px solid;
  transform: skew(-30deg);
  width: 20%;
  overflow: hidden;
}

.container img {
  max-width: 100%;
  display: block;
  transform: skew(30deg);
}
<div class="container">
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
  <a href=""><img src="http://via.placeholder.com/350x150"></a>
</div>
Bhuwan
  • 16,525
  • 5
  • 34
  • 57
  • The easiest and fastest way IMHO is just to scale it, e.g. `scale(1.25)`. – VXp Apr 17 '18 at 08:02
  • another duplicate : https://stackoverflow.com/questions/49289529/unskewing-the-ends-of-an-assortment-multiple-skewed-images/49289555#49289555 – Temani Afif Apr 17 '18 at 08:55

2 Answers2

-1

You can try making the image a bit bigger than its original size with transform: scale() property. Try this code.

.container img {
  max-width: 100%;
  display: block;
  transform: skew(30deg), scale(1.2);
}
Aryan Twanju
  • 2,464
  • 1
  • 9
  • 12
-1

You could also use clip-path to mask the images.

Clip Path Generator: https://bennettfeely.com/clippy/

Caniuse: https://caniuse.com/#search=clip-path

Browser support is a problem for IE though.

You need to set negative margins (or something similar) on the <a> to have the elements align like in your sketch.

David
  • 57
  • 4