0

我正在制作一个客户的网站，其中包含以下设计：

设计

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

为了完成设计，我做了一个 parent div，有 2 个子 div：.background& .content，它们相互重叠（position+ z-index）。

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

此外，如果我使用border-imageon .triangle，我的三角形会丢失。只有在可能的情况下，我才想在 CSS 中做到这一点。

我把一点 JSFiddle 放在一起让我的问题更清楚：https ://jsfiddle.net/c1pgeq7j

4

2 回答 2

0

试试这个

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。

于 2017-08-03T12:35:28.620 回答
0

感谢 Adam Wathan给了我想要的答案：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-变体clip-path，所以在最新版本的Safari.

感谢您尝试帮助我的人！

于 2017-08-03T14:29:48.807 回答