创建一个带有三个垂直线（条纹）的形状[关闭]答案

【问题标题】：Create a shape with three vertical lines (stripes) [closed]创建一个带有三个垂直线（条纹）的形状[关闭]
【发布时间】：2016-10-14 14:44:25
【问题描述】：

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

【问题讨论】：

你尝试过创建这个形状吗？
我建议采用 SVG 方式，纯 CSS 会变得过于复杂，因此不切实际

标签： css svg css-shapes

【解决方案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;
}

&lt;div class='shape'&gt;&lt;/div&gt;

您也可以使用 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 不太擅长。}

【讨论】：

好主意，非常感谢

【解决方案2】：

我做了一个fiddle。

诀窍是您需要转换图形并使用vertical-align 属性。

 -webkit-transform: skew(20deg); 
  vertical-align: text-top;

【讨论】：

【解决方案3】：

调整@Siddarth 的代码，这可能更适合上面给出的图像：

div{
  display:inline-block;
  vertical-align: text-top;
    -webkit-transform: skew(-20deg); 
  -moz-transform: skew(-20deg); 
  -o-transform: skew(-20deg); 
  background: white; 
}

.one{
  width: 450px; 
  height: 100px; 
}
div:not(.one){
  margin-left:0px;
  width: 20px; 
  height: 200px; 
}
.two{
  opacity:.8;
}
.three{
  opacity:.6;
}
.four{
  opacity:.4;
}
body {
  background-color: rgb(255, 210, 2);
  }

<body>
<div class="one">

</div>
<div class="two">

</div>
<div class="three">

</div>
<div class="four">

</div>
  </body>

【讨论】：