html - 我怎样才能用 css 和 html 做这种曲折

Question

当我尝试获得这种锯齿形时遇到问题我尝试了很多但不幸的是它没有用。

我试过这种编码方式

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

但我得到的是锯齿形矩形，但我需要的是线而不是矩形

我想要这样

Answer 1

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 更改为其高度的一半。