【发布时间】：2019-07-19 04:09:34
【问题描述】：
晚上好，
我目前正在尝试在我正在开发的新网站上设计对角柱效果，但在尝试正确放置背景时遇到了麻烦。
An image of what I am trying to achieve.
理想情况下，我想根据滚动事件和/或一些动画来更改颜色，这就是为什么我尝试使用 CSS 来实现这种效果，而不是使用模拟图像作为背景。该网站将需要做出响应，这消除了一些硬编码的可能性..
Here is a CodeSandBox 包含我为解决此问题所做的尝试。不幸的是，transform-origin 属性似乎没有按预期工作。
编辑：从 Sandbox 在此处添加代码以供将来参考。
EDIT2：Adding a second example image to show opposing gradients. 这在 Bryce Howitson 的回答中提到。
.container {
width: 100vw;
height: 100vh;
overflow-y: hidden;
border: 1px solid black;
}
.rotated {
transform: rotate(45deg);
transform-origin: center top;
display: flex;
flex-direction: row;
}
.column {
width: 200px;
height: 1200px;
background: blue;
}
.column1 {
width: 200px;
height: 1200px;
background: red;
} <div class="container">
<div class="rotated">
<div class="column"></div>
<div class="column1"></div>
<div class="column"></div>
<div class="column1"></div>
<div class="column"></div>
<div class="column1"></div>
</div>
</div>感谢阅读！
【问题讨论】：
-
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。
-
看看linear-gradient吧。
-
感谢@Paulie_D 的评论，这是一个很好的观点。我将使用 Stack Snippet 编辑我的问题以包含代码。
-
@ChrisW。线性梯度实际上是最终目标。我打算为每个不同的列添加一个颜色渐变，渐变方向不同。
标签： css multiple-columns css-transforms diagonal css-gradients