创建具有三条垂直线条(条纹)的形状

如何使用CSS创建如下图所示的3条垂直线？

这很容易用linear-gradient背景图像创建,我们不需要多个div元素来创建渐变.我们所需要的只是一些渐变图像.

以下是如何实现形状的说明:

一个线性梯度图像,其在X轴上为容器尺寸的85%,在Y轴上为容器尺寸的75%,用于产生大的白色部分,并且它位于容器的左侧.

再一个线性梯度图像是X轴上容器尺寸的15%和容器尺寸在Y轴上的15%用于在末端产生三个条纹.通过将渐变分成彩色和透明部分来创建条纹.彩色部分的大小相等,以产生条纹效果.

注意:图像中的第三个条似乎比其他条稍低,我假设这是图像中的错误.如果不是,则仍可通过以下方法实现.

body {
  background: yellow;
}
.shape {
  height: 100px;
  width: 400px;
  transform: skew(-30deg);
  transform-origin: left bottom;
  background-image: linear-gradient(to left, rgba(255,255,255,0.5) 25%, transparent 25%, transparent 33%, rgba(255,255,255,0.75) 33%, rgba(255,255,255,0.5) 60%, transparent 60%, transparent 66%, rgba(255,255,255,1) 66%, rgba(255,255,255,0.75) 93%, transparent 93%), linear-gradient(white, white);
  background-size: 15% 100%, 85% 75%;
  background-position: 100% 100%, 0% 0%;
  background-repeat: no-repeat;
}