CSS 设计 : Help placing diagonal columns to fill screen from top-right

Question

晚上好，

我目前正尝试在我正在开发的新网站上设计对 Angular 线柱效果，但在尝试正确放置背景时遇到了问题。

An image of what I am trying to achieve .

理想情况下，我想根据滚动事件和/或某些动画更改颜色，这就是为什么我尝试使用 CSS 来实现这种效果，而不是使用模拟图像作为背景。该网站将需要做出响应，这消除了一些硬编码的可能性。

Here is a CodeSandBox包含我为解决此问题所做的尝试。不幸的是，transform-origin 属性似乎没有按预期工作。

编辑:在此处添加来自 Sandbox 的代码以供将来引用。

编辑 2: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>

感谢阅读!

Answer 1

你可以用一个linear-background做很多。这种方法的好处是您不必转换任何东西，而且它是响应式的，因为它填满了容器。

body {
 background: #333;
}

.stripes {
  width: 80%;
  min-height: 300px;
  margin: 40px auto;
  border-radius: 10px;
  
background-image: 
linear-gradient(-45deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 9%, rgba(224,14,14,1) 9%, rgba(224,14,14,1) 22%, rgba(0,212,255,1) 22%, rgba(0,212,255,1) 45%, rgba(255,89,0,1) 45%, rgba(255,89,0,1) 63%, rgba(2,0,36,1) 63%, rgba(2,0,36,1) 65%, rgba(0,212,255,1) 65%);
}

<div class="stripes"></div>

编辑#1:

您可以通过在同一元素上堆叠多个背景渐变来做更多事情。

body {
 background: #333;
}

.stripes {
  width: 80%;
  min-height: 300px;
  margin: 40px auto;
  border-radius: 10px;
  
background-image: 
linear-gradient(34deg, rgba(9,9,15,0.8) 0%, rgba(0,212,255,0) 70%),
linear-gradient(-45deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 9%, rgba(224,14,14,1) 9%, rgba(224,14,14,1) 22%, rgba(0,212,255,1) 22%, rgba(0,212,255,1) 45%, rgba(255,89,0,1) 45%, rgba(255,89,0,1) 63%, rgba(2,0,36,1) 63%, rgba(2,0,36,1) 65%, rgba(0,212,255,1) 65%);
}

<div class="stripes"></div>

编辑#2:SVG 似乎是这个问题的一个不错的解决方案。我喜欢它的可扩展性而不模糊。

body {
  background: #333;
}

.stripes {
  width: 80%;
  min-height: 300px;
  margin: 40px auto;
  border-radius: 10px;
  
  background-size: cover;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/10307/stripes.svg);
  background-repeat: no-repeat;
}

<div class="stripes"></div>

不幸的是，这需要编辑 SVG 文件本身来添加旋转。最后一种选择是在容器内使用 SVG 内联。我们将使用大小调整(使其大于容器)和绝对定位来确保它在旋转时覆盖所有内容。

body {
  background: #333;
}

.stripes {
  width: 80%;
  min-height: 300px;
  margin: 40px auto;
  border-radius: 10px;
  
  overflow:hidden;
  position: relative;
}

.stripes svg {
  position: absolute;
  z-index: -1;
  top:-50%;
  left:-50%;
  width: 200%;
  height: 200%;
  transform: rotate(45deg);
}

<div class="stripes">
  <svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="83.2079305%" id="linearGradient-1">
            <stop stop-color="#E8FF04" offset="0%"></stop>
            <stop stop-color="#CD1144" offset="100%"></stop>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="86.756968%" id="linearGradient-2">
            <stop stop-color="#3816E3" offset="0%"></stop>
            <stop stop-color="#00FF81" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="stripes2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="R1" fill="#00CEFF" transform="translate(81.836327, 250.000000) rotate(-360.000000) translate(-81.836327, -250.000000) " x="0" y="2.84217094e-14" width="163.672655" height="500"></rect>
        <rect id="R2" fill="#060120" transform="translate(168.982036, 250.000000) rotate(-360.000000) translate(-168.982036, -250.000000) " x="163.982036" y="0" width="10" height="500"></rect>
        <rect id="R2" fill="url(#linearGradient-1)" transform="translate(203.441118, 250.000000) rotate(-360.000000) translate(-203.441118, -250.000000) " x="174" y="0" width="58.8822355" height="500"></rect>
        <rect id="R4" fill="url(#linearGradient-2)" transform="translate(285.395210, 250.000000) rotate(-360.000000) translate(-285.395210, -250.000000) " x="233" y="0" width="104.790419" height="500"></rect>
        <rect id="R5" fill="#DF0E0D" transform="translate(373.425150, 250.000000) rotate(-360.000000) translate(-373.425150, -250.000000) " x="336" y="0" width="74.8502994" height="500"></rect>
        <rect id="R6" fill="#060120" transform="translate(455.500000, 250.000000) rotate(-360.000000) translate(-455.500000, -250.000000) " x="411" y="0" width="89" height="500"></rect>
    </g>
</svg>
</div>