css实现一个半圆

CSS 可以轻松地创建一些流行的形状，包括半圆。在这篇文章中，我们将通过 CSS 实现一个半圆的效果。

/* 定义一个半圆形状 */
.circle {
  width: 100px;
  height: 50px;
  background-color: red;
  border-radius: 0 0 50px 50px;
}

/* 将半圆旋转 180 度 */
.circle.rotate {
  transform: rotate(180deg);
}

上面的 CSS 代码定义了一个半圆形状，具有 100 像素的宽度和 50 像素的高度。background-color 属性用于指定这个圆的颜色，而 border-radius 属性定义了一个 50 像素的圆角，使其看起来像半圆形状。

要将半圆翻转到顶部，只需为其添加 rotate 类，并将其旋转 180 度。这将使半圆形状朝上。

<div class="circle"></div>
<div class="circle rotate"></div>

我们可以使用上面的 HTML 代码来创建两个半圆，并为一个半圆添加 rotate 类，以将其翻转到顶部。

现在，你已经学会了如何使用 CSS 实现半圆形状。这个技巧可以应用于很多场景，比如在网页设计中使用形状作为分割线或背景。