如何創建對角線切割背景，以便在每個螢屏尺寸的右上角和左下角精確切割-有解無憂

我正在嘗試創建一個對角線背景，如圖所示。

如何創建對角線切割背景，以便在每個螢屏尺寸的右上角和左下角精確切割

在這張圖片上，它似乎有兩個不同的背景，對角線是完美的，即從右上角到左下角分開切割。

我想要完全一樣。

這是我的代碼：

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

它還可以在某些螢屏尺寸上完美切割，但如果你改變螢屏尺寸，它也會改變。有什么方法可以保持該位置并沿對角線分隔背景，而不管螢屏尺寸如何？

uj5u.com熱心網友回復：

固定角度僅適用于某些螢屏尺寸，例如正方形為 45 度。但是，您可以使用如下關鍵字來表示漸變的方向：

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

這給出了一個漸變，它可以根據容器（例如螢屏）的大小調整其角度。查看https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()了解更多詳情。

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/436798.html

標籤：html css

上一篇：如何在div的頂部設計不相交的三角形角

下一篇：檢查元素計數是否為奇數，或者僅使用CSS