如何在wordpress的顶部菜单中制作渐变圆圈

Question

我真的非常喜欢这个 wordpress 网站上的一半 CSS 渐变圆圈，但我真的无法自己实现它。 Url 是 https://admincontrol.com/nl/oplossingen/data-room/

谁能帮我指点一下？非常感谢！

Answer 1

您可以在 div 元素上试验 border-radius。如果将其设置为 50%，div 会变圆。然后将渐变应用为 background 并将其放置在顶部中间。您也可以尝试调整大小以获得令人满意的结果。

.gradient-circle {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  background: #53fdff; /* fallback */
  background: linear-gradient(0deg, #53fdff, #74ffc1);
  border-radius: 50%;
  width: 100vw;
  height: 100vw;
}

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

Answer 2

想法

一个大圆圈，一个 div，border-radius: 100% 和 width: >= 到它的容器。
从顶部隐藏一半。
水平居中。

相对于其容器的大小（width、height）和定位（top、left）以%单位和position: absolute，肯定在 position: relative 的容器内。

参考

红色区域是视口（我们看到的）：

例子

您可能正在寻找的响应式之一：

.container {
  display: grid;
  place-content: center;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  min-width: 100vw;
}

.gradient {
  background: linear-gradient(180deg, #e9fff8 59.5%, #a7edd4);
  border-radius: 100%;
  height: 100%;
  width: 100%;
  top: -50%;
  position: absolute;
  /* to avoid hidding the content, we move it a layer back*/
  z-index: -1;
}

@media screen and (max-width: 480px) {
  .gradient {
    width: 200%;
    left: -50%;
  }
}


/* Ignore code below */

* {
  margin: 0;
}

<div class="container">
  <div class="gradient"></div>
  <div class="content">
    Lorem ipsum dolor sit amet.
  </div>
</div>

如何在wordpress的顶部菜单中制作渐变圆圈

How to make a gradient circle across top menu in wordpress

css

gradient

想法

参考

例子