Question

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

Answer 1

使用linear-gradient背景图片创建非常简单，我们不需要多个div元素来创建渐变。我们只需要一些渐变图像。

下面解释了如何实现形状：

一个线性渐变图像，其在X轴上为容器尺寸的85％，在Y轴上为容器尺寸的75％，用于产生大的白色部分，并且位于左侧的容器
另一个线性梯度图像是X轴上容器尺寸的15％和容器在Y轴上的尺寸的15％用于在末端产生三个条纹。通过将渐变分成彩色和透明部分来创建条纹。彩色部分的大小相等，以产生类似条纹的效果。

注意：相关图片中的第三个条似乎比其他条稍低，我假设这是图像中的错误。如果不是，仍然可以通过以下方法实现。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 2

我做了fiddle。

技巧是你需要转换数字并使用vertical-align属性。

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

Answer 3

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

＆＃13;

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);
  }

＆＃13;

<body>
<div class="one">

</div>
<div class="two">

</div>
<div class="three">

</div>
<div class="four">

</div>
  </body>

＆＃13;

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

3 个答案: