title: How to create a card with image as background in CSS diagonally sliced
body: <p>I am trying to create a Card in HTML/CSS, that looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/Tdk3y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tdk3y.png" alt="enter image description here"></a></p>
  
  <p>BUT, what I want exactly is that the background, instead of being just grey like it is, is an image instead. </p>
  
  <p>Here is what I've tried: <a href="https://jsfiddle.net/cz8mnjhL/" rel="nofollow noreferrer">JsFiddle</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="card"&gt;
    &lt;img src="https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg" alt="Avatar" class='image'&gt;
    &lt;div class="container"&gt;
      &lt;h3&gt;John Doe&lt;/h3&gt;
      &lt;p&gt;Architect &amp; Engineer&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.card {
    border: 1px solid #dadada;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.2s;
    width: 50%;
  }
  
  .card h3 {
    padding: 2px;
    margin: 8px 0;
  }
  
  .image {
    width:100%; 
    clip-path: polygon(0 0, 100% 0, 100% 42%, 0 23%);
  }
  </code></pre>
  
  <p>As you can see it works, but the problem is that there's space in between the image and the 'John Doe'. </p>
  
  <p>I would like to know how to remove the space between the image and the John Doe.</p>
  
  <p>Thanks</p>