Search code examples
csscss-shapeslinear-gradients

Background - single diagonal stripe

I need to have a background with CSS as the image attached back I can't make it work with linear-gradient.

enter image description here

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>

Solution

  • 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>