css - 两片式背景上的线性渐变

Question

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

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

为了完成设计，我制作了一个父 div，它有两个子 div:.background 和 .content，它们相互重叠(位置 + z-index)。

在 .background 中，我有 2 个 div:.triangle 和 .block。
由于 .triangle 具有固定高度 (220px)，因此 .block 的渐变可以从 -220px 开始: 线性渐变(黄色 -220px，绿色 100%)。
但问题是我的 .block div 有一个可变高度，所以我不知道在哪里结束 .triangle 的渐变。

此外，如果我在 .triangle 上使用 border-image，我的三 Angular 形就会丢失。只有在可能的情况下，我才想用 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 .