CSS-向卡片添加倾斜背景

Question

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

我可以在整个背景中创建照片。这是一个jsfiddle示例。

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

这是我当前代码的代码段：

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

Answer 1

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

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

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;
 }