Background - single diagonal stripe - css

Question

I need to have a background with CSS as the image attached back I can't make it work with linear-gradient.
I was trying with the following but I am unable to create just 1 white stripe.
div {
background: #5cbcb0;
background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 27%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 74.81%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 76.19%, #5cbcb0 100%);
background-size: 593.97px 593.97px;
}
<div style="height: 200px;"></div>

Answer 1

You just need to provide correct start and stop values for the colors. The occurrence of the multiple white stripes were due to the multiple #fff values that were used after 73.81%.
div {
background: linear-gradient(135deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
/* Start #5cbcb0 from 0 and end at 5%, Start #fff at 5% and end at 15%, Start #5cbcb0 again at 15% and end at 100% */
background-size: 593.97px 593.97px;
background-repeat: no-repeat; /* To avoid multiple instances */
}
<div style="height: 200px;"></div>

Answer 2

Try adding no-repeat if that helps check snippet.
div {
background: #5cbcb0;
background: linear-gradient(120deg, #5cbcb0 10%, #ffffff 10%, #ffffff 30%, #5cbcb0 27%, #5cbcb0 50%, #5cbcb0 50%, #5cbcb0 100%, #ffffff 73.81%, #ffffff 76.19%, #5cbcb0 100%, #5cbcb0 100%) no-repeat;
background-size: 593.97px 593.97px;
}
<div style="height: 800px;"></div>

Answer 3

You can try it like below. I defined the size in percentage so it will be responsive.
body {
background:
linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/30% 80% no-repeat,
#5cbcb0;
margin:0;
height:100vh;
}
If you want a static version simply use pixel values:
body {
background:
linear-gradient(to bottom right, #5cbcb0 15%,#fff 15.5% 49.5%,transparent 50%) top left/200px 200px no-repeat,
#5cbcb0;
margin:0;
height:100vh;
}

Answer 4

Be careful with CSS!
The extra stripes remark that you did not just create 3 shapes, but another shape as well. If you want to create just 3 shapes, you only need 4 values instead of more.
So this will work:
div {
background: #5cbcb0;
background: linear-gradient(120deg, #5cbcb0 5%, #ffffff 5%, #ffffff 15%, #5cbcb0 15%);
background-size: 593.97px 593.97px;
background-repeat: no-repeat;
}
<div style="height: 200px;"></div>
So you just need 4 values for that. Yes, this is a repeat of the top answer, but this gives what actually is going on here. So to avoid multiple instances, use no-repeat and it would work because if you remove that it will show multiple instances, if you try. Also, you can remove the height: 200px and move it to the div class to avoid inline styling. It works with 135 degrees also, so 120 is not a "special" number in which case this works. And also, you don't want it to show more than 1 white stripe so that's why I put up background-repeat: no-repeat.