在CSS中缩放非矩形形状的条纹背景？

Question

我正在尝试使用纯CSS实现下图所示的设计，其中条纹图案从类似颜色的内容块以一定角度向下投射，但在其条带之外，背景保留其基色。

我能够通过混合线性渐变与百分比停止，背景大小属性和rgba颜色来实现条纹背景的预期效果 - 原始模型中的条纹是子像素宽度，我通过降低不透明度来模拟 - 但是当然默认情况下这个模式填充其截面的整个矩形，当我希望它被限制为从右手div向下延伸的平行四边形时，但不会中断流动内容。

我想避免简单地将背景设置为所需结果的图像，因为我正在以移动优先的响应方式设计此网站，因此我需要平滑缩放纯CSS解决方案。

我一直在玩变换：skewX属性，并且发现它有效，只要你包含一个用于解开块内容的包装器，但问题仍然是我现在有了我想要的有角度的边界，我不知道我知道如何使它们符合上面的右手div而不影响我的想法。

Here是我在其中实现了第一个建议的JSFiddle，但正如您所看到的，此解决方案是无响应的。根据建议，条纹背景的当前迭代是：在具有以下样式的伪元素之前。

#striped::before {
  content: '';
  position: absolute;
  top: -150px;
  right: 130px;
  width: 200%;
  height: 200px;
  background: linear-gradient( rgba(93, 165, 182, 0.3) 25%, transparent 25%, transparent 50%, rgba(93, 165, 182, 0.3) 50%, rgba(93, 165, 182, 0.3) 75%, transparent 75%, transparent);
  );
  background-size: 100% 4px;
  transform: rotate(-45deg);
  transform-origin: top right;
  margin:0;
}

Answer 1

由于我们没有可以使用的代码，我在这里展示了一个概念验证如何做到

div {
  position: relative;
  height: 500px;
  background: lightblue;
  overflow: hidden;
}
div::before {
  content: '';
  position: absolute;
  top: -150px;
  right: 130px;
  width: 200%;
  height: 200px;
  background: linear-gradient(
    to bottom,
    #8cf,
    #8cf 50%,
    transparent 50%,
    transparent
  );
  background-size: 100% 6px;
  transform: rotate(-45deg);
  transform-origin: top right;
}

<div></div>

根据评论和问题编辑进行了更新

主要部分是将条带伪移动到p，因此它会随之大小，这是一个更新版本，使用您的代码库，我更新/添加了这些规则（并添加了{标记中的{1}}容器。

div

.container {
  overflow: hidden;
}
#preceding p {
  position: relative;
}
#preceding p::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0px;
  width: 70%;
  height: 500vh;
  transform: rotate(45deg) translate(0%,-50vw);
  transform-origin: left top;
  background: linear-gradient(90deg, rgba(93, 165, 182, 0.3) 25%, transparent 25%, transparent 50%, rgba(93, 165, 182, 0.3) 50%, rgba(93, 165, 182, 0.3) 75%, transparent 75%, transparent);
  );
  background-size: 14px 100%;
  margin:0;
  z-index: -1;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #e0dabf;
  margin: 0;
}

p {
  font-family: "Libre Baskerville";
}

p a {
  font-size: 1rem;
}

#preceding {
  display: flex;
  margin: 0;
}

#preceding h2 {
  flex: 3;
  font-family: "Libre Franklin";
  font-size: 2.25rem;
  font-weight: 600;
  margin: 0;
  padding: 1rem 1rem 1rem 1.5rem;
  color: #5da5b6;
}

#preceding p {
  display: block;
  flex: 7;
  background-color: #5da5b6;
  color: #d5caa2;
  padding: 0.75rem;
  margin: 0;
  text-align: right;
}

#preceding p a {
  color: #f2da83;
}

#striped {
  text-align: center;
  margin: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow:row wrap;
  padding:0;
}

#striped h2 {
  flex:1 100%;
}

#striped div {
  flex:1 50%;
  margin:0;
}

.container {
  overflow: hidden;
}
#preceding p {
  position: relative;
}
#preceding p::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0px;
  width: 70%;
  height: 500vh;
  transform: rotate(45deg) translate(0%,-50vw);
  transform-origin: left top;
  background: linear-gradient(90deg, rgba(93, 165, 182, 0.3) 25%, transparent 25%, transparent 50%, rgba(93, 165, 182, 0.3) 50%, rgba(93, 165, 182, 0.3) 75%, transparent 75%, transparent);
  );
  background-size: 14px 100%;
  margin:0;
  z-index: -1;
}

#further {
  margin:0;
  background-color:#5da5b6;
}

#further h1 {
  margin:0;
}