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

Question

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

Answer 1

这很容易用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;
}

<div class='shape'></div>

您还可以使用SVG path元素来创建此形状.

.shape {
  position: relative;
  height: 100px;
  width: 300px;
}
.shape svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
}
.shape svg path#white-bar {
  fill: rgba(255, 255, 255, 1);
}
.shape svg path#translucent-bar-1 {
  fill: rgba(255, 255, 255, 0.75);
}
.shape svg path#translucent-bar-2 {
  fill: rgba(255, 255, 255, 0.5);
}
body {
  background: yellow;
}

<div class='shape'>
  <svg viewBox='0 0 300 100'>
    <path d='M0,75 25,0 240,0, 221.5,75z M245,0 220,100 235,100 260,0' id='white-bar' />
    <path d='M265,0 240,100 255,100 280,0' id='translucent-bar-1' />
    <path d='M285,0 260,100 275,100 300,0' id='translucent-bar-2' />
  </svg>
</div>

^{注意:很可能使用单个path元素和有角度的渐变填充来创建它,但我对SVG不太好.}