用css制作半圆英雄形象[重复]答案

【问题标题】：Making a half circle hero image with css [duplicate]用css制作半圆英雄形象[重复]
【发布时间】：2021-06-30 13:42:50
【问题描述】：

我正在尝试在屏幕上画一个半圆，我可以在上面放置按钮和其他东西，就像 AdminBro 顶部蓝色圆圈一样，但要小一点。我是这样做的：

.navbar {
    position: relative;
    overflow: hidden;
}

.eclipse {
    position: absolute;
    width: 200vw;
    height: 200vw;
    left: -50vw;
    top: -180vw;
    background-color: #41B3A3;
    border-radius: 100vw;
}

<div id="root">
  <div class="navbar">
    <div class="eclipse"></div>
  </div>
</div>

如您所见，这是一个反应应用程序。问题是我没有得到想要的结果，请告诉我为什么？

【问题讨论】：

检查元素：body.landing .main-hero { background: #4268F6; color: #fff; padding: 300px 40% 160px; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; margin: -250px -30% 0; text-align: center; }
是的先生，这似乎对管理员兄弟的检查元素很熟悉，问题是，你能解释一下它是如何以及为什么它有效而我的无效吗？

标签： html css

【解决方案1】：

我不太确定我是否理解你的问题，但如果你只想画一个半圈，试试这个：

.half-circle {
   width: 200px;
   height: 100px; /* needs to be half of the width */
   border: 10px solid black;
   border-bottom: none;
   background: green;
   border-radius: 110px 110px 0 0;
}

注意，边框半径是 100 像素（高度）+ 边框宽度（10 像素）。如果您不需要边框，则顶部两个角的边框半径正好等于您的身高。

【讨论】：

【解决方案2】：

有一个更简单的方法。您可以简单地使用 CSS 的 clip-path 属性。

在body标签下方创建一个div元素，并为其指定一个绝对位置和全宽和全高。然后使用clip-path创建创建剪切路径。

HTML

<div class="ellipse"></div>

CSS

.div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: cyan;
    clip-path: ellipse(80% 50% at 50% 5%);
}

您可以使用这些值。这个clip-path generator 也是一个有用的工具。

【讨论】：