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

<p><a href="https://i.stack.imgur.com/0xkdP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0xkdP.png" alt="enter image description here"></a></p>

<p>Is there any another way to do this?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  &lt;a href=""&gt;&lt;img src="http://via.placeholder.com/350x150"&gt;&lt;/a&gt;
  &lt;a href=""&gt;&lt;img src="http://via.placeholder.com/350x150"&gt;&lt;/a&gt;
  &lt;a href=""&gt;&lt;img src="http://via.placeholder.com/350x150"&gt;&lt;/a&gt;
  &lt;a href=""&gt;&lt;img src="http://via.placeholder.com/350x150"&gt;&lt;/a&gt;
  &lt;a href=""&gt;&lt;img src="http://via.placeholder.com/350x150"&gt;&lt;/a&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
