Question

TLDR：我希望将此作为可扩展的解决方案：

更长的解释： 目标是使用带有渐变的旋转div作为背景。但问题是旋转不能定义为deg，因为它会根据浏览器宽度而变化。因此，元素应为浏览器的100％宽度，左侧 固定高度 ，右侧固定较低的高度。

基本上这可以通过仅水平拉伸的图像背景轻松完成。唯一的问题是应该还有一个图案叠加层应该被剪裁在同一区域，这应该重复而不是拉伸（你可以看到这些图案由相同的框组成）

所以我的想法是：是否可以为特定目标像素旋转元素？

当前示例：

.triangleClipper {
  height: 100px;
  overflow: hidden;
}

.designElement {
  background: linear-gradient(to right, #03cc65, #fbfe02); 
  height: 100px;
  width: 200%;
  transform-origin: top left;
  transform: rotate(-2deg);
  margin-top: -60px;
}

https://jsfiddle.net/0egg320q/ 在调整浏览器大小时，您会在右边缘看到问题。因此，在宽度屏幕上，您会看到三角形的末端和小屏幕，它太高了。目标是在每个浏览器大小的左右边缘保持相同的高度。

欢迎任何其他想法。

Answer 1

您可以使用clip-path百分比。像这样你将始终拥有固定的高度，然后你可以根据需要简单地旋转线性渐变：

＆＃13;

body {
background:#ccc;
}

.triangleClipper {
  height: 100px;
  overflow: hidden;
}

.designElement {
  background: linear-gradient(10deg, #03cc65, #fbfe02);
  height: 100px;
  width: 100%;
  -webkit-clip-path: polygon(120% 0, 0 0, 0 100%);
  clip-path: polygon(120% 0, 0 0, 0 100%);
}

＆＃13;

<div class="triangleClipper">
  <div class="designElement"></div>
</div>

＆＃13;

您只需要注意所有浏览器都不支持此属性。

使用伪元素的另一种解决方案，但在这种情况下，您将使底部部分着色而不透明：

＆＃13;

body {
  background:#ccc;
}
.triangleClipper {
  height: 100px;
  overflow: hidden;

}

.designElement {
  background: linear-gradient(10deg, #03cc65, #fbfe02);
  height: 100%;
  width: 100%;
  position:relative;
  overflow:hidden;
}
.designElement:after {
    content: "";
    position: absolute;
    border-right: 120vw solid #fff;
    border-bottom: 100px solid #fff;
    border-top: 100px solid transparent;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="triangleClipper">
  <div class="designElement"></div>
</div>

＆＃13;

<强>更新

使用偏斜变换和一些％属性的另一个好方法。此解决方案不会使高度固定，但会使两个高度的比率固定。它也可能很有趣。

＆＃13;

body {
  background: #ccc;
}

.triangleClipper {
  width: 100%;
  overflow: hidden;
  padding-top: 30%;
}

.designElement {
  background: linear-gradient(to right, #03cc65, #fbfe02);
  padding-top: 100%;
  margin-top: -120%;
  width: 100%;
  transform: skewY(-7deg);
}

＆＃13;

<div class="triangleClipper">
  <div class="designElement"></div>
</div>

＆＃13;

Answer 2

在搜索剪辑路径（尤其是IE）的跨浏览器方式后，我发现使用SVG是最佳解决方案。

可悲的是，SVG不支持多边形的百分比值，因此我只能通过添加JavaScript并根据浏览器大小实时更正值来解决此问题。（基本上，SVG用于缩放对象，JS仅用于校正模式图像输出。）

$(function() {

  //svg der fensterbreite anpassen
  var fullWidth = $('.styleElementTop').width();
  console.log(fullWidth);
  $('.styleElementTop svg')[0].setAttribute('viewBox', '0 0 ' + fullWidth + ' 100');
  $('.styleElementTop #gradientFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
  $('.styleElementTop #patternFill')[0].setAttribute('points', '0,0 0,100 ' + fullWidth + ',10 ' + fullWidth + ',0');
});

  body {
    padding: 0px;
    margin: 0px;
  }
  
  .styleElementTop {
    height: 100px;
    width: 100%;
  }
  
  #gradientFill {
    fill: url(#mainGradient);
  }
  
  #patternFill {
    fill: url(#mainPattern);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="styleElementTop">
  <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 700 100" preserveAspectRatio="none">
    <defs>
      <linearGradient id="mainGradient">
        <stop stop-color="#03cc65" offset="0%" />
        <stop stop-color="#fbfe02" offset="100%" />
      </linearGradient>
      <pattern id="mainPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
        <image width="10" height="10" xlink:href="https://live.tlprod.de/temp/whitepattern.png" />
      </pattern>
    </defs>
    <polygon id="gradientFill" points="0,0 0,100 700,10 700,0"></polygon>
    <polygon id="patternFill" points="0,0 0,100 700,10 700,0"></polygon>
  </svg>
</div>

CSS根据宽度/固定像素值进行旋转

2 个答案: