css3 锯齿状边缘在左边而不是右边

Question

如何在左侧添加锯齿状边缘而不是将其定位在右侧？我尝试改变背景位置等但没有运气，有什么想法吗？谢谢

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

<div>test</div>

Answer 1

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: left top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  height: 100%;
  left: -10px;
}

<div>test</div>

以下是我所做的一些差异:

https://www.diffchecker.com/fq7w3utq