我怎么能用css和html做这种类型的zigzag

我试过这种编码方式

CSS

.zigzag:before {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  width: 100%;
  height: 10px;
}
.container2:before {
  background:
    linear-gradient(
      45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    ),
    linear-gradient(
      -45deg, transparent 33.333%,
      #E2E2E2 33.333%, #E2E2E2 66.667%,
      transparent 66.667%
    );
  background-size: 20px 40px;
}

但我得到像矩形之字形但我需要的是像线而不是矩形

我想要这样
 

div{
    height: 50px;
    background:  
      linear-gradient(135deg, white 35%, transparent 25%) -25px 0,
      linear-gradient(225deg, white 35%, transparent 25%) -25px 0,
      linear-gradient(315deg, white 35%, transparent 25%),
      linear-gradient(45deg, white 35%, transparent 25%);   
    background-size: 50px 50px;
    background-color: black;
}

http://jsfiddle.net/4ay1uduz/

只需将所有50px更改为元素的高度,并将所有25px更改为其高度的一半.