css3锯齿状边缘透明bg

Question

我试图在图像上的div上使用css3制作锯齿状边缘，我需要它有一个透明的bg，bg我的意思是锯齿状边缘

请参阅以下小提琴：http://jsfiddle.net/ovb597yq/

<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-

gradient(135deg, #ec173a 5px, #fff 0) 0 5px;
background-color: #ec173a;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;width:200px;height:200px;">test</div>

 body{
        background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}

它的白色我试图让它变得透明，但目前还没有发生

有什么想法吗？

Answer 1

您需要在:after：pseudo-element上应用它并将#fff更改为transparent。

＆＃13;

＆＃13;

body {
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
  position: relative;
  background-color: #ec173a;
  width: 200px;
  height: 200px;
}
div:after {
  content: '';
  position: absolute;
  background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  height: 100%;
  right: -10px;
}

＆＃13;

<div>test</div>

＆＃13;

＆＃13;

＆＃13;