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

Question

TLDR:我想将其实现为可扩展的解决方案:

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

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

所以我的想法是:是否可以针对特定目标像素旋转元素？

当前示例:

.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/调整浏览器大小时，您会在右边缘看到问题。所以在宽屏幕上你会看到三 Angular 形的末端，而在小屏幕上它太高了。目标是在每个浏览器大小上保持左右边缘的高度相同。

欢迎任何其他想法。

Answer 1

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

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%);
}

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

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

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

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;
}

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

更新

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

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);
}

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