CSS радуга построена с использованием градиентных цветов и нескольких делений - PullRequest
Новая
       21

CSS радуга построена с использованием градиентных цветов и нескольких делений

0 голосов
/ 14 марта 2019


В связи с этим вопросом css rainbow, построенная с использованием градиентных цветов
, есть ли способ сделать это, используя несколько divs вместо одного?
Вы можете спросить, почему, когда вы можете сделать это только с одним, хорошо для образовательных целей.
Это то, что я сделал, но выглядит не очень хорошо.
Любые идеи будут высоко оценены. 

.mainDiv {
  display: inline-block;
}

.rainbow1 {
  height: 100px;
  width: 55px;
  background: linear-gradient(78deg, red 5%, transparent 7%);
  float: left;
}

.rainbow2 {
  height: 100px;
  width: 55px;
  background: linear-gradient(72deg, orange 12%, transparent 14%);
  float: left;
}
<div class="mainDiv">
  <div class="rainbow1"></div>
  <div class="rainbow2"></div>
 </div>

Ответы [ 3 ]

1 голос
/ 14 марта 2019

Поскольку вы хотите рассмотреть несколько делений, я бы избавился от градиента и рассмотрел бы косое преобразование и сплошной цвет фона для перекрытия.

Вот 3 деления: 

.rainbow {
  position:relative;
  width:200px;
  height:100px;
}
.rainbow > div {
   position:absolute;
   top:0;
   bottom:0;
   width:100%;
   right:100%;
   transform-origin:top;
}
.rainbow > div:nth-last-child(1) {
  background:red;
  transform:skewX(8deg);
}
.rainbow > div:nth-last-child(2) {
  background:blue;
  transform:skewX(16deg);
}
.rainbow > div:nth-last-child(3) {
  background:yellow;
  transform:skewX(24deg);
}

body {
  margin: 0;
}
<div class="rainbow">
  <div></div>
  <div></div>
  <div></div>
</div>

Вы можете легко масштабировать до любого количества делений. 

.rainbow {
  position:relative;
  width:200px;
  height:100px;
}
.rainbow > div {
   position:absolute;
   top:0;
   bottom:0;
   width:100%;
   right:100%;
   transform-origin:top;
}
.rainbow > div:nth-last-child(1) {
  background:red;
  transform:skewX(8deg);
}
.rainbow > div:nth-last-child(2) {
  background:blue;
  transform:skewX(16deg);
}
.rainbow > div:nth-last-child(3) {
  background:yellow;
  transform:skewX(24deg);
}
.rainbow > div:nth-last-child(4) {
  background:pink;
  transform:skewX(32deg);
}
.rainbow > div:nth-last-child(5) {
  background:purple;
  transform:skewX(40deg);
}

body {
  margin: 0;
}
<div class="rainbow">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Чтобы иметь затухание, вы можете рассмотреть фильтр blur: 

.rainbow {
  position:relative;
  width:200px;
  height:100px;
  overflow:hidden;
}
.rainbow > div {
   position:absolute;
   top:0;
   bottom:-5px;
   width:100%;
   right:100%;
   transform-origin:top;
   filter:blur(2px);
}
.rainbow > div:nth-last-child(1) {
  background:red;
  transform:skewX(8deg);
}
.rainbow > div:nth-last-child(2) {
  background:blue;
  transform:skewX(16deg);
}
.rainbow > div:nth-last-child(3) {
  background:yellow;
  transform:skewX(24deg);
}
.rainbow > div:nth-last-child(4) {
  background:pink;
  transform:skewX(32deg);
}
.rainbow > div:nth-last-child(5) {
  background:purple;
  transform:skewX(40deg);
}

body {
  margin: 0;
}
<div class="rainbow">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
1 голос
/ 14 марта 2019

Я использовал float:right и использовал ширину для выравнивания столбца. В соответствии с вашим примером используется тот же градиент. Я надеюсь, что это будет полезно для вас. 

.mainDiv {
  clear: both;
}
.rainbow1 {
    background: linear-gradient(78deg, red 5%, transparent 7%), linear-gradient(69deg, orange 10%, transparent 12%), linear-gradient(60deg, yellow 15%, transparent 17%), linear-gradient(51deg, green 20%, transparent 22%);
    width: 50%;
    float: left;
    height: 100px;
}
.rainbow2 {
    background: linear-gradient(43deg, blue 25%, transparent 27%), linear-gradient(35deg, indigo 30%, transparent 32%), linear-gradient(28deg, violet 35%, transparent 37%);
    width: 50%;
    height: 100px;
}
<div class="mainDiv">
    <div class="rainbow1"></div>
    <div class="rainbow2"></div>
</div>

Обновлен код для три столбца с width:33%. Прикрепленный фрагмент для вашей справки. 

.mainDiv {
    clear: both;
    position: relative;
}

.rainbow1 {
    background: linear-gradient(78deg, red 5%, transparent 7%), linear-gradient(69deg, orange 10%, transparent 12%), linear-gradient(60deg, yellow 15%, transparent 17%);
    height: 100px;
    width: 33%;
    position: relative;
    z-index: 2;
}

.rainbow2 {
    background: linear-gradient(51deg, green 20%, transparent 22%), linear-gradient(43deg, blue 25%, transparent 27%);
    height: 100px;
    width: 33%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.rainbow3 {
    background: linear-gradient(35deg, indigo 30%, transparent 32%), linear-gradient(28deg, violet 35%, transparent 37%);
    height: 100px;
    width: 33%;
    position: absolute;
    top: 0;
    left: 0;
}
<div class="mainDiv">
    <div class="rainbow1"></div>
    <div class="rainbow2"></div>
    <div class="rainbow3"></div>
</div>
0 голосов
/ 17 марта 2019

Вот пример с:

  • несколько делений
  • треугольники, сделанные с границами
  • фигуры различной ширины, расположенные друг над другом, с их z-Индекс скорректирован соответственно 

div[class*="rainbow"] {
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
}

.rainbowRed {
	border-width: 200px 0 0 20px;
	border-color: transparent transparent transparent red;
	z-index: 7;
}

.rainbowOrange {
	border-width: 200px 0 0 40px;
	border-color: transparent transparent transparent orange;
	z-index: 6;
}

.rainbowYellow {
	border-width: 200px 0 0 70px;
	border-color: transparent transparent transparent yellow;
	z-index: 5;
}

.rainbowGreen {
	border-width: 200px 0 0 110px;
	border-color: transparent transparent transparent green;	
	z-index: 4;
}

.rainbowBlue {
	border-width: 200px 0 0 160px;
	border-color: transparent transparent transparent blue;	
	z-index: 3;
}

.rainbowIndigo {
	border-width: 200px 0 0 220px;
	border-color: transparent transparent transparent indigo;
	z-index: 2;
}

.rainbowViolet {
	border-width: 200px 0 0 290px;
	border-color: transparent transparent transparent violet;
	z-index: 1;
}
<div class="rainbowRed"></div>
<div class="rainbowOrange"></div>
<div class="rainbowYellow"></div>
<div class="rainbowGreen"></div>
<div class="rainbowBlue"></div>
<div class="rainbowIndigo"></div>
<div class="rainbowViolet"></div>
...