文章/答案/技术大牛

发布

社区首页 >问答首页 >如何创建对角线裁剪背景，使其准确地在每个屏幕大小的右上和左下切。

问如何创建对角线裁剪背景，使其准确地在每个屏幕大小的右上和左下切。
EN

Stack Overflow用户

提问于 2022-03-03 08:06:39

回答 1查看 54关注 0票数 2

我正试图创建一个对角线背景，如图像所示。

在这个图像上，它似乎有两个不同的背景和对角线是完美的，即，它分别从上-右到下左。

我想要的就是那样。

这是我的代码：

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

它在某些屏幕尺寸上也是完美的，但是如果你改变了屏幕大小，它也会改变。是否有任何方法，以保持该位置和分隔背景对角线，无论屏幕大小？

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-03-03 08:19:54

只有在特定的屏幕尺寸(例如，方格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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71333860

复制

相似问题

问如何创建对角线裁剪背景，使其准确地在每个屏幕大小的右上和左下切。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建对角线裁剪背景，使其准确地在每个屏幕大小的右上和左下切。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何创建对角线裁剪背景，使其准确地在每个屏幕大小的右上和左下切。
EN