如何在对角切片的CSS中以背景为背景创建卡片 [英] How to create a card with image as background in CSS diagonally sliced

问题描述

我正在尝试在HTML / CSS中创建卡片，如下所示：

I am trying to create a Card in HTML/CSS, that looks like:

但是，我要的是背景不是图像而是灰色，而是图像。

BUT, what I want exactly is that the background, instead of being just grey like it is, is an image instead.

这是我尝试的方法： JsFiddle

HTML：

<div class="card">
  <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'>
  <div class="container">
    <h3>John Doe</h3>
    <p>Architect & Engineer</p>
  </div>
</div>

CSS：

.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%);
}

如您所见，它起作用了，但问题是两者之间有空格图片和 John Doe。

As you can see it works, but the problem is that there's space in between the image and the 'John Doe'.

我想知道如何删除图像和John Doe之间的空间。

I would like to know how to remove the space between the image and the John Doe.

谢谢

推荐答案

依靠后台，您将获得更好的支持和更少的代码：

Rely on background and you will have better support and less code:

.card {
  border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  padding:100px 10px 5px;
  width: 50%;
  background:
   linear-gradient(to bottom left,transparent 49.5%,#fff 50%) 0 50px/100% 100px,
   linear-gradient(#fff,#fff) bottom/100% calc(100% - 150px),
   url(https://www.washingtonpost.com/resizer/9YWv-qOa9uW7CQZ9UGiW23eTZzU=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/BTCNJJN2Y43KPHPXPQWPASXRKM.jpg) top/100% auto no-repeat;
   background-repeat:no-repeat;
}

.card h3 {
  padding: 2px;
  margin: 8px 0;
}

<div class="card">
    <h3>John Doe</h3>
    <p>Architect & Engineer</p>
</div>

这篇关于如何在对角切片的CSS中以背景为背景创建卡片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！