div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
我正在尝试用 8 种颜色构建一个圆圈,你能帮我调整一下上面的代码吗?
最佳答案
使用以下 CSS:
div {
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
关于html - CSS:具有八种颜色和只有一个 div 的圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40781022/