如何在对角切片的CSS中以背景为背景创建卡片

Question

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

但是，我确切想要的是背景，而不是像它一样只是灰色，而是图像。

这是我尝试过的：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”之间有空间。

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

谢谢

Answer 1

您可以将以下内容添加到CSS：

.container {
  position: absolute;
  top: 150px;
}

您会看到卡的高度受到影响。您可以按照您的期望给卡片一个高度，就像这样：

.card {
  height: 300px //this is your prefered height
}

Answer 2

.card {
  border: 1px solid #dadada;
  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.2s;
  width: 50%;
  height:200px;
  position:relative;
}

.card h3 {
  padding: 2px;
  margin: 8px 0;
/*   line-height: 20px !important;
  font-size: 18px !important;
  font-weight: 500 !important; */
}

.card:hover {
  box-shadow: 8px 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card .container {
  padding: 2px 14px;
  position: absolute;
  top: 45%;
}

.card p {
  margin: 14px 0;
}
.card img {
  position:absolute
  }

//仅此而已。

Answer 3

这是使用CSS转换的简单解决方案。

.wrapper {
  position: relative;
  width: 280px;
  height: 350px;
  background: url('https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg') 0 0 no-repeat;
  background-size: cover;
  overflow: hidden;
}

.box {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: #cdcdcd;
}

.content {
  position: absolute;
  z-index: 10;
  padding: 15px;
  box-sizing: border-box;
}

.folder {
  position: absolute;
  top: -20px;
  left: -10px;
  width: 120%;
  height: 60px;
  background: #cdcdcd;
  transform: rotate(8deg);
}

<div class="wrapper">
  <div class="box">
    <div class="content">Here is my content.</div>
    <div class="folder"></div>
  </div>
</div>

Answer 4

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

.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>