CSS - 向卡片添加倾斜背景[重复]答案

【问题标题】：CSS - Adding a skew background to card [duplicate]CSS - 向卡片添加倾斜背景[重复]
【发布时间】：2021-01-01 16:42:15
【问题描述】：

我正在尝试使用transform: skew(-30deg); 创建一张卡片。我的目标是将卡片分成类似于此示例的两种颜色：

当它是播放的整个背景时，我可以创建照片。这是一个jsfiddle 示例。

但是当试图在卡片中添加相同的效果时，它没有任何效果。我试图在第一个小提琴中添加相同的 CSS 属性作为确定卡片背景的类的伪元素。目前它对卡片背景没有影响，卡片的背景仍然是完全蓝色的（在下面的jsfiddle链接中）。我怎样才能将这个效果添加到卡片中？

这是我当前代码的一个代码sn-p：

.card {
  background: blue;
}

.card::after{
  
  position: fixed;
    top: 0px;
    left: 0px;
    width: 70%;
    height: 100%;
    background-color: white;
    z-index: 1;
    transform: skew(-30deg);
    transform-origin:top;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>

  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-content black-text">
          <span class="card-title">Card Title</span>
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
      </div>
    </div>
  </div>

我希望在上面这张卡片内部的照片中出现同样的歪斜效果。那里有一个有角度的蓝色背景，其余的是白色。这是一个带有卡片代码的 jsfiddle：https://jsfiddle.net/3cntLx5u/10/

【问题讨论】：

(1) 缺少 content:"" 和 (2) 在伪元素上使用 position:absolute 和在 card 元素上使用 position:relative

标签： html css

【解决方案1】：

这应该是朝着正确方向迈出的一步：https://jsfiddle.net/3cntLx5u/10/

您的主要问题是您的position 已修复，而您的::after 选择器中缺少content！

body{
  background-color: #000;
}

.card {
  background: blue;
}

.card::after{
 content: '';
 position: absolute;
 top: 0px;
 left: 0px;
 width: 70%;
 height: 100%;
 background-color: white;
 z-index: 1;
 transform: skew(-30deg);
 transform-origin:top;
 }

【讨论】：