创建具有三个垂直线（条纹）的形状

Question

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

Answer 1

我做了一个fiddle。

技巧是你需要转换图形并使用 vertical-align 属性.

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

Answer 2

调整@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>

Answer 3

使用 linear-gradient 背景图像创建非常容易，我们不需要超过一个 div 元素来创建带有渐变的图像。我们只需要几张渐变图像。

下面是如何实现形状的解释：

一个线性渐变图像，它是 X-axis 中容器大小的 85% 和 Y-axis 中容器大小的 75% 用于创建大的白色部分，它位于容器的左侧。
另一个线性渐变图像是 X-axis 中容器大小的 15% 和 Y-axis 中容器大小的 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.}

创建具有三个垂直线（条纹）的形状

Create a shape with three vertical lines (stripes)

css

svg

css-shapes