如何在 CSS 中创建一个半圆

在 CSS 中创建半圆可以使用伪元素 ::before 和 ::after 和 border-radius 属性来实现。

实现方法

简单方法

最简单的方法是使用 border-radius 和 transform 属性来创造一个半圆：

.half-circle {
  width: 200px;
  height: 100px;
  border-radius: 0 0 100px 100px;
  background-color: red;
  transform: rotate(-45deg);
}

这会创建一个宽度为 200 像素、高度为 100 像素的红色半圆。

使用伪元素

使用 ::before 或 ::after 伪元素可以创建两个半圆组成一个完整的圆形。这可以使用 border-radius 属性和伪元素的 content 和 display 属性来实现：

.half-circle-container {
  position: relative;
  width: 200px;
  height: 100px;
}

.half-circle-container::before, .half-circle-container::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
}

.half-circle-container::before {
  left: 0;
  width: 100px;
  height: 100px;
  border-radius: 100px 0 0 100px;
  background-color: red;
}

.half-circle-container::after {
  right: 0;
  width: 100px;
  height: 100px;
  border-radius: 0 100px 100px 0;
  background-color: red;
}

这会创建一个宽度为 200 像素、高度为 100 像素的红色圆形。

结论

以上这些方法可以用来创建简单的圆形或半圆形，但如果需要更复杂的形状，则可能需要使用 SVG 或其他图像格式。