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

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

我做了一个测试

诀窍是您需要变换图形并使用垂直对齐属性

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

我做了一个测试

诀窍是您需要变换图形并使用垂直对齐属性

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

---

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

div{ 显示：内联块； 垂直对齐：文本顶部； -webkit变换：倾斜-20度； -moz变换：倾斜-20度； -o变换：倾斜-20度； 背景：白色； } .一{ 宽度：450px； 高度：100px； } div：不是一个{ 左边距：0px； 宽度：20px； 高度：200px； } .二{ 不透明度：.8； } .三{ 不透明度：.6； } .4{ 不透明度：.4； } 身体{ 背景色：RGB255210,2； }

---

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

div{ 显示：内联块； 垂直对齐：文本顶部； -webkit变换：倾斜-20度； -moz变换：倾斜-20度； -o变换：倾斜-20度； 背景：白色； } .一{ 宽度：450px； 高度：100px； } div：不是一个{ 左边距：0px； 宽度：20px； 高度：200px； } .二{ 不透明度：.8； } .三{ 不透明度：.6； } .4{ 不透明度：.4； } 身体{ 背景色：RGB255210,2； }

---

这是非常容易创建线性梯度背景图像，我们不需要超过一个div元素来创建这个梯度。我们只需要两张渐变图像

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

一个线性渐变图像用于创建大的白色部分，该图像在X轴上的大小为容器大小的85%，在Y轴上的大小为容器大小的75%，并定位在容器的左侧。 使用另一个线性渐变图像（X轴为容器大小的15%，Y轴为容器大小的15%）在末端创建三条条纹。条纹是通过将渐变分割为彩色和透明部分创建的。彩色部分大小相等，以产生条纹状效果。 注意：图像中的第三个条似乎比其他条稍低，我假设这是图像中的一个错误。如果不是，仍然可以通过以下方法实现

身体{ 背景：黄色； } .形状{ 高度：100px； 宽度：400px； 变换：倾斜-30度； 变换原点：左下角； 背景图像：左侧线性渐变，RGBA255255,0.5 25%，透明25%，透明33%，RGBA255255,0.75 33%，RGBA255255,0.5 60%，透明60%，透明66%，RGBA255255,1 66%，RGBA255255,0.75 93%，透明93%，线性渐变白色，白色； 背景大小：15%100%，85%75%； 背景位置：100%100%，0%0%； 背景重复：无重复； }

---

这是非常容易创建线性梯度背景图像，我们不需要超过一个div元素来创建这个梯度。我们只需要两张渐变图像

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

一个线性渐变图像用于创建大的白色部分，该图像在X轴上的大小为容器大小的85%，在Y轴上的大小为容器大小的75%，并定位在容器的左侧。 使用另一个线性渐变图像（X轴为容器大小的15%，Y轴为容器大小的15%）在末端创建三条条纹。条纹是通过将渐变分割为彩色和透明部分创建的。彩色部分大小相等，以产生条纹状效果。 注意：图像中的第三个条似乎比其他条稍低，我假设这是图像中的一个错误。如果不是，仍然可以通过以下方法实现

身体{ 背景：黄色； } .形状{ 高度：100px； 宽度：400px； 变换：倾斜-30度； 变换原点：左下角； 背景图像：左侧线性渐变，RGBA255255,0.5 25%，透明25%，透明33%，RGBA255255,0.75 33%，RGBA255255,0.5 60%，透明60%，透明66%，RGBA255255,1 66%，RGBA255255,0.75 93%，透明93%，线性渐变白色，白色； 背景大小：15%100%，85%75%； 背景位置：100%100%，0%0%； 背景重复：无重复； }

---

你试过创建这种形状吗？我建议用SVG的方式，在普通CSS中可能会变得太复杂，因此不切实际。你试过创建这种形状吗？我建议用SVG的方式，在普通CSS中可能会变得太复杂，因此不切实际。好主意，谢谢