how can I make diagonal lines with css - html

Question

I'm trying to create a diagonal line with CSS, like the following image, but I have no idea how to do it.
Could you guide me how to do it?
.container {
position: relative;
background: #632878;
background: -moz-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
background: -webkit-linear-gradient(-45deg, #632878 9%, #862453 56%, #a83a39 100%);
background: linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: repeat;
width: 200%;
height: 100vh;
background-attachment: fixed;
overflow: hidden;
}
.container:before {
content: '';
position: absolute;
left: 1%;
width: 20%;
height: 160%;
background-color: rgb(255, 255, 255);
/* fallback */
background-color: rgba(255, 255, 255, 0.5);
top: 0;
-webkit-transform: rotate(55deg);
-moz-transform: rotate(55deg);
transform: rotate(55deg);
}
<div class="container">
<!-- Content... -->
</div>

Answer 1

You can consider multiple background. Here is an example:
.container {
margin: 0;
background:
linear-gradient(to top right, transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% + 60px/2 + 80px/2)/100% 80px,
linear-gradient(to bottom right,transparent 49.5%, rgba(255, 255, 255, 0.5) 50%) 50% calc(50% - 60px/2 - 120px/2)/100% 120px,
linear-gradient(rgba(255, 255, 255, 0.5),rgba(255, 255, 255, 0.5)) center/100% 60px,
linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: no-repeat;
height: 400px;
width:400px;
overflow: hidden;
}
<div class="container">
</div>
Or clip path like below:
.container {
margin: 0;
background:
linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: no-repeat;
height: 400px;
width:400px;
position:relative;
}
.container::before {
content:"";
position:absolute;
top:80px;
bottom:50px;
left:0;
right:0;
background:rgba(255, 255, 255, 0.5);
-webkit-clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);
clip-path: polygon(0 31%, 100% 0, 100% 100%, 0 75%);
}
<div class="container">
</div>
Another idea with rotation and perspective:
.container {
margin: 0;
background:
linear-gradient(135deg, #632878 9%, #862453 56%, #a83a39 100%);
background-repeat: no-repeat;
height: 400px;
width:400px;
position:relative;
overflow:hidden;
}
.container::before {
content:"";
position:absolute;
top:140px;
bottom:120px;
left:0;
right:0;
background:rgba(255, 255, 255, 0.5);
transform:perspective(200px) rotateY(-25deg);
transform-origin:left;
}
<div class="container">
</div>