gpt4 book ai didi

html - 使用渐变颜色和多个 div 构建的 css 彩虹

转载 作者:太空宇宙 更新时间:2023-11-04 00:54:19 29 4
gpt4 key购买 nike


与这个问题相关 css rainbow built using gradient colors
有没有办法通过使用多个 div 而不是一个来做到这一点?
您可能会问,为什么只用一个就可以做到这一点,出于教育目的。
这就是我所做的,但看起来不太好。
任何想法将不胜感激。

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

最佳答案

我使用了 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>

关于html - 使用渐变颜色和多个 div 构建的 css 彩虹,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55154969/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com