2拼接背景上的线性渐变

Question

我正在建立一个客户网站，其中包含以下设计：

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

为了完成设计，我制作了一个父div，有两个子div：.background＆amp; .content，彼此重叠（position + z-index）。

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

如果我在border-image上使用.triangle，我的三角形也会丢失。我希望只有在可能的情况下才能在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;
}

这里是小提琴：https://jsfiddle.net/c1pgeq7j/4/

尝试使用transform: skewY(8.5deg);进行倾斜的另一侧，并尝试检查colorzilla。

Answer 2

感谢Adam Wathan giving me the answer我正在寻找：https://jsfiddle.net/c1pgeq7j/10

他最后没有孩子 - div在.background中，并将以下CSS应用于其中：

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

只需要添加-webkit-的{​​{1}}变体，因此clip-path的最新版本也支持它。

感谢您试图帮助我的人！