线性渐变之字形背景图像答案

【问题标题】：Linear gradient zig zag background image线性渐变之字形背景图像
【发布时间】：2014-02-15 22:55:06
【问题描述】：

有没有什么方法可以使用background-image 代替纯色，以便与下面的容器匹配？

我知道我可以使用.svg 或.png 图像轻松完成此操作。我想只使用 CSS 来完成它。

.zigzag {
    tag:position:absolute;
    top:320px;
    z-index:99;
    height:20px;
    width:100%;
    background:
        linear-gradient(0deg, transparent 30px, white 30px),
        linear-gradient(-135deg, white 19px, transparent 19px),
        linear-gradient(135deg, white 19px, transparent 19px);
    background-color: transparent;
    background-position: left bottom;
    background-repeat: repeat-x;
    background-size: 100% 100%, 30px 30px, 30px 30px;
    transform:rotate(180deg);
}

【问题讨论】：

演示注意事项：它不是浏览器前缀，所以最好在 FF 中查看
谢谢，还没开始做。
您能否进一步详细说明所需的最终结果是什么？
我希望之字形的白色使用与其下方使用的相同图像。在示例中，我只是使用占位符：placehold.it/900x2000/666666。想象一下，如果那是一种纹理而不是一种单一的颜色。之字形也需要是纹理，否则它就不能用作效果。
那么两者都不是纯色？

标签： background-image css background-color linear-gradients

【解决方案1】：

使用线性渐变和纯色，你可以做一半的锯齿边缘。一侧是纯色，另一侧是背景纹理。 http://codepen.io/gc-nomade/pen/kdjce

div:after {
  content:'';
  display:block;
  height:20px;
  background:repeating-linear-gradient(
    45deg,
    transparent ,
    transparent  50%,
    gray 50%,  
    gray
  ) 
    bottom,
    repeating-linear-gradient(
      -45deg,
      transparent ,
      transparent  50%,
      gray 50%,  
      gray
    ) 
    bottom
    ;
  background-size:30px 30px;
  background-repeat:repeat-x;
  box-shadow:0 -100px/* or bigger */ 0 100px gray;/* this to fill background of parent div */
}
body {
  margin:0;
  background:url(http://www.bene.be/images/uploads/2011-blog/20111007/textures/texture-07.jpg)
    }

<div><p> lets have some content</div> 这就是我能想到的纯 CSS 的全部内容。注意渐变使用较短的 CSS :) .

其他选项是使用来自 png 的边框图像。不幸的是，我没有准备好用来制作示例的图像（也没有时间制作）。

【讨论】：

谢谢。但现在我的问题是，灰色可以用图像代替吗？最终，我希望顶部和底部都有背景图像，而不必为之字形边框创建第三个图像元素。
2 和现在 3 ，这些图像是什么？重复纹理，景观，其他？

【解决方案2】：

我实际上忘记了这个问题，但我很久以前就解决了，并在 Codepen 上创建了一个演示：http://codepen.io/dcdev/pen/noAiw

css

body { 
  background-color:transparent;
}
div { 
  margin:0 auto;
  width:940px;
  height:300px;
}
div.top { 
  background-image:url(http://www.placehold.it/940x300/2D8ABE);
}
div.bottom { 
  background-image:url(http://www.placehold.it/940x300/A93459); 
}
#zz {
  max-width:940px;
  margin-top:-125px;
  height:15px;
  background:-webkit-linear-gradient(0deg,transparent 15px,#fff 15px),-webkit-linear-gradient(-135deg,#fff 10px,transparent 10px),-webkit-linear-gradient(135deg,#fff 10px,transparent 10px);background:-moz-linear-gradient(0deg,transparent 15px,#fff 15px),-moz-linear-gradient(-135deg,#fff 10px,transparent 10px),-moz-linear-gradient(135deg,#fff 10px,transparent 10px);background:-o-linear-gradient(0deg,transparent 15px,#fff 15px),-o-linear-gradient(-135deg,#fff 10px,transparent 10px),-o-linear-gradient(135deg,#fff 10px,transparent 10px);background:-ms-linear-gradient(0deg,transparent 15px,#fff 15px),-ms-linear-gradient(-135deg,#fff 10px,transparent 10px),-ms-linear-gradient(135deg,#fff 10px,transparent 10px);background:linear-gradient(0deg,transparent 15px,#fff 15px),linear-gradient(-135deg,#fff 10px,transparent 10px),linear-gradient(135deg,#fff 10px,transparent 10px);background-color:transparent;background-position:center center;background-repeat:repeat-x;-webkit-background-size:100% 100%,15px 15px,15px 15px;-moz-background-size:100% 100%,15px 15px,15px 15px;background-size:100% 100%,15px 15px,15px 15px;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);
}

html

<div class="top"></div>
<div id="zz" role="separator"></div>
<div class="bottom"></div>

【讨论】：