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及其变体的某种组合来完成，但我无法弄明白。

附：另外，请告诉我这种方法是否可行，以及如何做到这一点。

Answer 1

使用元素宽度/高度的百分比计算边框半径，因此除非浏览器窗口是完全正方形，否则边框将更加椭圆形，而不是圆形。这是我的建议：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

div：制作一个半圆盘

1 个答案: