Дизайн CSS: Помогите расположить диагональные столбцы, чтобы заполнить экран сверху справа - PullRequest
Новая
       36

Дизайн CSS: Помогите расположить диагональные столбцы, чтобы заполнить экран сверху справа

0 голосов
/ 25 февраля 2019

Добрый вечер,

В настоящее время я пытаюсь создать эффект диагонального столбца на новом веб-сайте, который я разрабатываю, но у меня возникают проблемы при попытке правильно разместить фон.

Изображение того, чего я пытаюсь достичь .

В идеале я бы хотел изменить цвета на основе события прокрутки и / или некоторой анимации, которая являетсяпочему я пытаюсь добиться этого эффекта с помощью CSS и не использую макет изображения для фона.Веб-сайт должен быть сделан адаптивным, что устраняет некоторые жестко закодированные возможности.

Вот CodeSandBox , содержащий попытку, которую я предпринял, пытаясь решить эту проблему.собственность, к сожалению, не работает должным образом.

РЕДАКТИРОВАТЬ: Добавление кода из Песочницы для дальнейшего использования.

РЕДАКТИРОВАНИЕ2: Добавление второго примера изображения для отображения противоположных градиентов. Это упоминается в комментариях Брайса Хоуитсона.ответ.

.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>

Спасибо за чтение!

1 Ответ

0 голосов
/ 25 февраля 2019

Вы можете сделать ЛОТ с одного 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>

Edit # 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>

Edit # 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>
...