html - 两种色调风格背景

Question

我只需要像这样设置双色调背景的样式。

我尝试并成功地使用了线性渐变

背景:线性渐变(172deg，#ECB034 50%，#BE883C 50%)；

但是调整网页大小时出现问题。它只是没有很好地对齐它的 Angular 落。表现得很奇怪。像这样

有什么办法可以做到这一点吗？

.cta{
  padding: 60px 0;
  background: linear-gradient(172deg, #ECB034 50%, #BE883C 50%);
  text-align:center;
}

.cta h3{
  font-size: 58px;
  margin-bottom: 30px;
  font-weight: 700;
}

.cta a{
  padding: 16px 49px;
  border: 2px solid #000;
  color: inherit;
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 500;
}

    <div class="cta text-center">
      <div class="container">
        <h3>Let’s talk about your project.</h3>
        <a href="">Get Started ></a>
      </div>
    </div>

Answer 1

这是一个非常简单的 SVG 修复(正如我在评论中提到的)，您只需将 preserveAspectRatio="none" 添加到 SVG 标记并通过 URL 编码器运行它。 This one甚至会为您生成 CSS，这非常好。

.cta{
  padding: 60px 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25' preserveAspectRatio='none' viewBox='0 0 10 10'%3E%3Crect width='10' height='10' fill='%23ECB034' /%3E%3Cpath d='m0 10 h10 v-10' fill='%23BE883C' /%3E%3C/svg%3E");
  text-align:center;
}

.cta h3{
  font-size: 58px;
  margin-bottom: 30px;
  font-weight: 700;
}

.cta a{
  padding: 16px 49px;
  border: 2px solid #000;
  color: inherit;
  font-size: 20px;
  text-transform: uppercase;
  display: inline-block;
  font-weight: 500;
}

<div class="cta text-center">
      <div class="container">
        <h3>Let’s talk about your project.</h3>
        <a href="">Get Started ></a>
      </div>
    </div>