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

Question

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

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 class="our-story-section">
          <div class="container">
            <div class="row">
              <h2 class="section-title">
               Dummy title
              </h2>
              <p class="section-description">
                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 class="row">
              <div class="col-md-6">
              <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 class="col-md-6">
                  <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?

Answer 1

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 class="our-story-section">
          <div class="container">
            <div class="row">
              <h2 class="section-title">
               Dummy title
              </h2>
              <p class="section-description">
                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 class="row">
              <div class="col-md-6">
              <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 class="col-md-6">
                  <ul>
                    <li>Lifetime service guarantee</li>
                    <li>Over 10 years of experience</li>
                  </ul>
              </div>
            </div>
          </div>
        </section>