通過多個元素的連續漸變

Question

我正在嘗試創建一個由四個菜單項組成的圓形/餅形導航。 整個菜單應該有四種主要顏色的漸變。 菜單項需要獨立，因為它們具有懸停效果。

我希望漸變在所有元素上無縫顯示。

這是它的樣子：

這是一個片段，向您展示我到目前為止所做的事情。 如您所見，漸變應用於每個元素而不是看起來均勻。

此外，當嘗試使用線性或徑向漸變時，我無法創建這種四邊形漸變，其中每個部分都是原色，然后淡入下一個部分。

任何幫助表示贊賞。

 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>

Answer 1

 .circle { width: 300px; height: 300px; background: conic-gradient(#81408e, #c84955, #f05435, #b58835, #7fbd37, #3baf75, #00a4b2, #3770a2, #81408e); border-radius: 50%; filter: blur(15px); } .circle-container { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; }

 <div class="circle-container"> <div class="circle"></div> </div>

Answer 2

好吧，我認為，而不是在“ul a”上使用背景，您應該只在“ul”上使用漸變，如下所示：

 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; } ul { 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>

Answer 3

您可以使用評論中討論的圓錐漸變或圖像本身，或者您可以在包含您想要形成漸變的所有元素的元素上使用模糊，並具有在模糊元素上使用overflow-hidden的父 div高邊界半徑。 然后把它放在你的交互式懸停層下，這可能是你已經擁有的，但從透明背景開始，所以漸變顯示出來。

我建議您將要模糊的容器比隱藏溢出的容器大一點，以防止圓圈外邊緣出現白色羽化。

如果您想更接近原始設計，我還建議您使用絕對位於元素上方的 SVG 十字，而不是邊框​​。

在此示例中，我使用網格進行放置以強制一些元素在沒有絕對定位的情況下相互疊加，但絕對定位元素也可以正常工作。

 .wrapper { position: relative; width: 20em; height: 20em; margin: 50px; display: grid; } .cross { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; pointer-events: none } .menu { position: relative; z-index: 2; grid-row: 1/2; grid-column: 1/2; position: relative; width: 20em; height: 20em; transform: rotate(45deg); padding: 0; margin: 0; } .item { position: absolute; width: 10em; height: 10em; color: #fff; transition: all 0.5s ease; transition: 0.5s; display: flex; overflow: hidden; text-transform: uppercase } .item, .item:hover { text-decoration: none } .item:nth-child(1) { top: 0; left: 0; border-top-left-radius: 100%; } .item:nth-child(2) { top: 0em; left: 10em; border-top-right-radius: 100%; } .item:nth-child(3) { top: 10em; left: 0; border-bottom-left-radius: 100%; } .item:nth-child(4) { top: 10em; left: 10em; border-bottom-right-radius: 100%; } .item span { transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; font-weight: 500; font-family: 'Oswald', sans-serif; font-size: 1.2rem; width: 100%; height: 100%; } .item:nth-child(2) span { justify-content: flex-start; } .item:nth-child(3) span { justify-content: flex-end; } .item:nth-child(1) span { position: relative; top: 1.5em; left: 1.5em } .item:nth-child(4) span { position: relative; top: -.75em; right: .75em } .item:nth-child(1):hover { background: #999; transform: translate(-10px, -10px); } .item:nth-child(2):hover { background: #999; transform: translate(10px, -10px); } .item:nth-child(3):hover { background: #999; transform: translate(-10px, 10px); } .item:nth-child(4):hover { background: #999; transform: translate(10px, 10px); } .gradient-concealer { height: 20em; width: 20em; border-radius: 99999px; overflow: hidden; position: relative; top: 0; left: 0; transform: rotate(45deg); transform-origin: center; grid-row: 1/2; grid-column: 1/2 } .gradient { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; background: #fff; filter: blur(30px); height: 24em; width: 24em; position: relative; top: -2em; left: -2em } .purple { background-color: #ca61df; background: radial-gradient(circle, rgba(202, 97, 223, 1) 11%, rgba(143, 97, 223, 1) 47%); } .red { background-color: #ff5932; } .blue { background-color: #16c5d3; background: radial-gradient(circle, rgba(25, 205, 219, 1) 18%, rgba(29, 166, 177, 1) 47%); } .green { background-color: #90d33c; }

 <div class="wrapper"> <div class="menu"> <a href="/" class="item"> <span>targeting</span> </a> <a href="/" class="item"> <span>optimization</span> </a> <a href="/" class="item"> <span>enablement</span> </a> <a href="/" class="item"> <span>measurement</span> </a> </div> <div class="cross"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="#fff"> <line vector-effect="non-scaling-stroke" x1="19" y1="5" x2="5" y2="19" /> <line vector-effect="non-scaling-stroke" x1="5" y1="5" x2="19" y2="19" /> </svg> </div> <div class="gradient-concealer"> <div class="gradient"> <div class="purple"></div> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </div> </div> </div>