How to create a diagonal cut background so that it cut exactly on top-right and bottom-left on every-CodePudding

I am trying to create a diagonal background as shown in image.

enter image description here

On this image, it seems to have two different background and the diagonal is perfect, i.e, it cuts separately from top-right to bottom-left.

I want exactly like that.

Here is my code:

.our-story-section{
    padding: 50px 15px;
    background: #000000;
    color: #ffffff;
    position: relative;
    background: linear-gradient(153deg, #17191F, #17191F 50%, #000000 50%, #000000)
}

        <section >
          <div >
            <div >
              <h2 >
               Dummy title
              </h2>
              <p >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id rhoncus odio. In nec eros non ipsum maximus lacinia. Maecenas tristique blandit orci, nec scelerisque odio aliquam a. Pellentesque sed pretium lacus.
              </p>
            </div>
            <div >
              <div >
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ut eveniet architecto laudantium sit dicta deleniti nulla illo accusantium, repellendus minima tempora est tenetur neque esse sapiente nam iusto doloremque.</p>
              </div>
              <div >
                  <ul>
                    <li>Lifetime service guarantee</li>
                    <li>Over 10 years of experience</li>
                  </ul>
              </div>
            </div>
          </div>
        </section>

It also cuts perfectly on some screen size, but if you change screen size then, it changes as well. Is there any way, to maintain that position and separates the background diagonally, irrespective of screen size?

CodePudding user response：

Having a fixed angle will only work for certain screen sizes e.g. 45deg for squares. You can however express the direction of the gradient with keywords like this:

linear-gradient(to right bottom, #17191F, #17191F 50%, #000000 50%, #000000)

This gives a gradient that adjusts its angle to the size of its container (e.g. the screen). Have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient() for more details.

.our-story-section{
    padding: 50px 15px;
    background: #000000;
    color: #ffffff;
    position: relative;
    background: linear-gradient(to right bottom, #17191F, #17191F 50%, #000000 50%, #000000)
}

<section >
          <div >
            <div >
              <h2 >
               Dummy title
              </h2>
              <p >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id rhoncus odio. In nec eros non ipsum maximus lacinia. Maecenas tristique blandit orci, nec scelerisque odio aliquam a. Pellentesque sed pretium lacus.
              </p>
            </div>
            <div >
              <div >
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas ut eveniet architecto laudantium sit dicta deleniti nulla illo accusantium, repellendus minima tempora est tenetur neque esse sapiente nam iusto doloremque.</p>
              </div>
              <div >
                  <ul>
                    <li>Lifetime service guarantee</li>
                    <li>Over 10 years of experience</li>
                  </ul>
              </div>
            </div>
          </div>
        </section>