CSS中带有透明背景的锯齿状边缘

Question

Make a divs top and bottom border have a jagged edge

基于@ᴀʀᴜnBᴇrtiL的答案，我能够创造出一些东西。

问题是看起来不好看，我无法摆脱背景色。不使用阴影是一种选择，但使用静态单色背景则不是。 那么如何让它变得透明呢？

还是有另一种方式吗？我知道CSS3可以在边框中使用图像，但我更喜欢没有图像的CSS代码。

Answer 1

有几种方法可以实现这一点（包括JS和SVG解决方案）。但是我认为使用纯CSS的最简单的解决方案是使用一些伪元素（渲染锯齿状边缘）与linear-gradient和多背景功能相结合。这是演示代码：

div {
  width:200px;
  height:250px;    
  background:white;
  position:relative;
  margin-top:25px;
}
div:before, div:after {
  content:'';
  width:100%;
  height:5px;
  position:absolute;
  bottom:100%;
  left:0;
  background-image: linear-gradient(135deg, transparent 66%, white 67%),
                    linear-gradient(45deg, white 33%, gray 34%, transparent 44%);
  background-position: -5px 0;
  background-size: 10px 100%;
  background-repeat:repeat-x;
}
div:after {
  top:100%;
  bottom:auto;
  background-image: linear-gradient(135deg, white 33%, gray 34%, transparent 44%),
                    linear-gradient(45deg, transparent 66%, white 67%);    
}
body {
  background:url(http://placekitten.com/800/600);
}

Demo.