通过多个元素的连续梯度
我正在尝试创建一个由四个菜单项组成的Circle/Pie Nav。总菜单应具有带有四种主要颜色的渐变。菜单项需要独立，因为它们具有悬停效果。
我希望梯度在所有元素上无缝显示。
这是应该的样子：
这是一个片段，可以向您展示我到目前为止所做的事情。如您所见，将梯度应用于每个元素与出现均匀的元素。
另外，当尝试使用线性或径向梯度时，我无法创建此二次类型梯度，每个部分是主要颜色，然后逐渐淡入下一节。
任何帮助都将受到赞赏。
ul {
margin: 100px auto;
padding: 0;
position: relative;
width: 20em;
height: 20em;
border-radius: 100%;
transform: rotate(45deg);
background: gray;
}
ul a {
position: absolute;
list-style: none;
width: 10em;
height: 10em;
color: #fff;
text-align: center;
line-height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border-left: 1px solid white;
border-top: 1px solid white;
transition: 0.5s;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background: linear-gradient(
49deg,
#6a3fc5 0%,
#f44336 25%,
#009688 50%,
#ffc107 100%
);
}
ul a:hover {
cursor: pointer;
}
ul li {
transform: rotate(-45deg);
}
ul a:nth-child(1):hover {
background: #999;
z-index: 19;
transform: translate(-10px, -10px);
}
ul a:nth-child(2):hover {
background: #999;
z-index: 19;
transform: translate(10px, -10px);
}
ul a:nth-child(3):hover {
background: #999;
z-index: 19;
transform: translate(-10px, 10px);
}
ul a:nth-child(4):hover {
background: #999;
z-index: 19;
transform: translate(10px, 10px);
}
ul a:nth-child(1) {
top: 0;
left: 0;
border-top-left-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul a:nth-child(2) {
top: 0em;
left: 10em;
border-top-right-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul a:nth-child(3) {
top: 10em;a
left: 0;
border-bottom-left-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul a:nth-child(4) {
top: 10em;
left: 10em;
border-bottom-right-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}<ul class="menu">
<a href="/"><li class="item">Targeting</li></a>
<a href="/"><li class="item">Optimization</li></a>
<a href="/"><li class="item">Enablement</li></a>
<a href="/"><li class="item">Measurement</li></a>
</ul>I'm trying to create a circle/pie nav that consists of four menu items. The overall menu should have a gradient with four main colors. The menu items need to be independent as they have hover effects.
I would like the gradient to display seamlessly over all the elements.
Here is what it should look like:
Here is a snippet to show you what I've done so far. As you can see, the gradient is applied to each element vs appearing uniform.
Also, when trying to use a linear or radial gradient, I haven't been able to create this quadrent-type gradient where each section is the primary color and then fades into the next section.
Any help is appreciated.
ul {
margin: 100px auto;
padding: 0;
position: relative;
width: 20em;
height: 20em;
border-radius: 100%;
transform: rotate(45deg);
background: gray;
}
ul a {
position: absolute;
list-style: none;
width: 10em;
height: 10em;
color: #fff;
text-align: center;
line-height: 5em;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease;
border-left: 1px solid white;
border-top: 1px solid white;
transition: 0.5s;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
background: linear-gradient(
49deg,
#6a3fc5 0%,
#f44336 25%,
#009688 50%,
#ffc107 100%
);
}
ul a:hover {
cursor: pointer;
}
ul li {
transform: rotate(-45deg);
}
ul a:nth-child(1):hover {
background: #999;
z-index: 19;
transform: translate(-10px, -10px);
}
ul a:nth-child(2):hover {
background: #999;
z-index: 19;
transform: translate(10px, -10px);
}
ul a:nth-child(3):hover {
background: #999;
z-index: 19;
transform: translate(-10px, 10px);
}
ul a:nth-child(4):hover {
background: #999;
z-index: 19;
transform: translate(10px, 10px);
}
ul a:nth-child(1) {
top: 0;
left: 0;
border-top-left-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul a:nth-child(2) {
top: 0em;
left: 10em;
border-top-right-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul a:nth-child(3) {
top: 10em;a
left: 0;
border-bottom-left-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}
ul a:nth-child(4) {
top: 10em;
left: 10em;
border-bottom-right-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
}<ul class="menu">
<a href="/"><li class="item">Targeting</li></a>
<a href="/"><li class="item">Optimization</li></a>
<a href="/"><li class="item">Enablement</li></a>
<a href="/"><li class="item">Measurement</li></a>
</ul>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
好吧，我认为，而不是在“ ul a”上使用背景，而应仅在“ ul”上使用梯度如下：
Well I think, instead of using background on "ul a" you should use the gradient only on the "ul" like below:
您可以使用评论中讨论的圆锥梯度或图像本身，也可以在包含要构成梯度的所有元素的元素上使用模糊，并具有使用
溢出隐藏的父级div 在具有高边框半径的模糊元件上。然后将其放在您的交互式悬停层下，这可以是您已经拥有的东西，但是以透明的背景开始，因此梯度通过显示。.我建议将您要模糊的容器比容器大一点隐藏溢流，以防止白色羽化在圆的外边缘。
我还建议您使用元素上的SVG十字架，如果您想更接近原始设计，而不是边界。
在此示例中，我使用网格放置将某些元素互相强制，而无需绝对定位，但绝对定位元素也会起作用。
You can use conic gradient or the image itself as discussed in the comments or you can use a blur on an element that contains all of the elements you want to form the gradient and have a parent div that uses
overflow-hiddenon the blurred element with a high border radius. Then place that under your interactive hover layer which can be what you already have but with a transparent background to begin with so the gradient shows through..I would recommend making the container you are going to blur be a bit larger than the container that will hide the overflow to prevent white feathering at the outer edges of the circle.
I'd also recommend using an SVG cross positioned absolutely over the elements instead of borders if you want to get closer to your original design.
In this example I'm using grid for placement to force some elements on top of one another without absolute positioning but absolute positioning the elements would work just as well.