Html 用css制作半圆英雄形象

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

.navbar{
位置：相对位置；
溢出：隐藏；
}
.月食{
位置：绝对位置；
宽度：200vw；
高度：200vw；
左：-50vw；
top:-180vw；
背景色：#41B3A3；
边界半径：100vw；
}

---

我不太确定是否理解您的问题，但如果您只想画一个半圆，请尝试以下方法：

.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;
}

---

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

有一种更简单的方法。您可以简单地使用CSS的属性

创建一个

div

元素，在body标签下方使用背景色，并为其指定绝对位置、全宽和全高。然后使用

剪辑路径

创建一个创建剪辑路径

HTML

---

你可以玩弄这些价值观。这也是一个有用的工具。

检查元素：

body.landing.main hero{background:#4268F6；color:#fff；padding:300px 40%160px；边框左下半径：50%；边框右下半径：50%；margin:-250px-30%0；text align:center；}/code>是的，先生，这似乎熟悉admin bro的检查元素，问题是，你能解释一下这是怎么回事，为什么我的不行？
<div class="ellipse"></div>

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