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