div: 做一个半圆盘

Question

我正在尝试用 div 创建一个半圆形。

这是我试过的。

div {
  width: 100px;
  height: 50px;
  background: gray;
  border-top-right-radius:100%;
  border-top-left-radius:100%;
}

<div>
</div>

我也试过50%和100%的其他组合，都是徒劳。

我认为可以通过 border-radius 及其变体的某种组合来完成，但我无法弄清楚。

P.S。另外，让我知道这种方法是否可行，还有其他方法可以做到。

Answer 1

border-radius 使用元素宽度/高度的百分比计算，因此除非浏览器 window 是完美的正方形，否则您的边框会更椭圆，而不是圆形。这是我的建议：

div {
  width: 100px;
  height: 50px;
  overflow: hidden;
}

div div {
  width: 100px;
  height: 100px;
  background: gray;
  border-radius: 50%;
}

<div>
  <div>
  </div>
</div>

仅使用一个 div（根据要求）：

div {
  background: grey;
  width: 100px;
  height: 50px;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}

<div></div>

另一种解决方案（使用伪元素）：

div {
  width: 100px;
  height: 50px;
  overflow: hidden;
}

div::before {
  content: '';
  display: block;
  width: 100px;
  height: 100px;
  background: gray;
  border-radius: 50%;
}

<div></div>

另一种解决方案（使用一种div）：

div {
  width: 100px;
  height: 50px;
  background: gray;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

<div></div>

div: 做一个半圆盘

div: make a semi-circular disc

html

css

border