两片式背景上的线性渐变

Question

我正在制作一个具有以下设计的客户网站：

如您所见，第 3 个块的内容大小可变，但顶部相同。它还有一个贯穿整个形状的微妙渐变。

为了完成设计，我制作了一个父项 div，其中有 2 个子项 div：.background 和 .content，它们相互重叠（position + z-index).

在 .background 里面，我有 2 个 div：.triangle & .block.
由于 .triangle 具有固定高度 (220px)，因此 .block 的渐变可以从 -220px 开始：linear-gradient(yellow -220px, green 100%).
但问题是我的 .block div 的高度是可变的，所以我不知道 .triangle 的渐变在哪里结束。

此外，如果我在 .triangle 上使用 border-image，我的三角形就会丢失。如果可能的话，我想在 CSS 中完成。

我整理了一些 JSFiddle 来使我的问题更清楚：https://jsfiddle.net/c1pgeq7j

Answer 1

试试这个

HTML

<div class="container">
  <div class="main">
    <div class="main-container">
      <section>
       <h1>Content</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent et est urna. Pellentesque hendrerit lobortis tincidunt. Sed et malesuada ante. Donec sit amet molestie libero. Nam sed gravida nunc. Ut porttitor rhoncus volutpat. Quisque eu sollicitudin quam. Quisque tempor justo eget sodales maximus.

Ut pharetra nulla sit amet augue vulputate pharetra. Nulla facilisis turpis vel velit commodo, eget feugiat leo tincidunt. Aenean consequat sapien vitae porttitor euismod. Quisque dictum vitae erat ac commodo. Nunc cursus a dolor et rutrum. Nunc lobortis a urna eu auctor. Curabitur cursus diam non lect</p>
    </section>
   </div>
  </div>
</div>

CSS

.container {
  padding-top: 97px;
}

.main-container {
  background: #00b7ea;
  background: -moz-linear-gradient(top, #00b7ea 49%, #009ec3 100%);
  background: -webkit-linear-gradient(top, #00b7ea 49%,#009ec3 100%);
  background: linear-gradient(to bottom, #00b7ea 49%,#009ec3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 );
  position: relative;
  height: 220px;
}

.main-container:before {
  content: '';
  position: absolute;
  left: 0;
  top: -53px;
  width: 100%;
  height: 95px;
  background: #00b7ea;
  -webkit-transform: skewY(8.5deg);
  -moz-transform: skewY(8.5deg);
  -ms-transform: skewY(8.5deg);
  -o-transform: skewY(8.5deg);
  transform: skewY(8.5deg);
  -webkit-backface-visibility: hidden;
}

section {
  margin: 10px auto;
  padding: 0 20px;
  padding-bottom: 10px;
  position: relative;
  max-width: 600px;
}

这是 fiddle：https://jsfiddle.net/c1pgeq7j/4/

尝试使用 transform: skewY(8.5deg); 来尝试倾斜的另一边，对于渐变尝试检查 colorzilla。

Answer 2

感谢 Adam Wathan giving me the answer I was looking for: https://jsfiddle.net/c1pgeq7j/10

他最终在 .background 中没有 child-div 并对其应用了以下 CSS：

background-image: linear-gradient(#176EFD, #1152B7);
clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 220px);

只需要添加clip-path的-webkit-变体，所以Safari的最新版本也支持了。

感谢您帮助我的人！

两片式背景上的线性渐变

linear-gradient on 2-pieced background

css

background-image

linear-gradients

border-image