如何使用 HTML 和 CSS 绘制半圆？

在网页设计中，有时候需要绘制一些特殊的图形，比如半圆。下面将介绍如何使用 HTML 和 CSS 绘制半圆。

方法一：使用 border-radius 属性实现半圆

可以使用 CSS3 中的 border-radius 属性来创建半圆，具体步骤如下：

1. 创建一个正方形的 div 元素。

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

2. 设置 div 元素的宽度和高度，并设置 border-radius 属性为 50%。这里的 50% 表示将边框角度设置为正方形边长的一半，即可以形成半圆。

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f00;
}

3. 将颜色设置为红色，这样就能看到一个红色的半圆了。

完整代码：

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

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #f00;
}

方法二：使用伪类实现半圆

通过伪类的方式也可以实现半圆，具体步骤如下：

1. 创建一个矩形的 div 元素。

<div class="semi-circle"></div>

2. 在 div 元素上添加一个伪元素，设置宽度和高度，并将其位置调整到矩形的上半部分。

.semi-circle:before {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50% 50% 0 0;
  background-color: #f00;
  transform-origin: bottom;
  transform: rotate(180deg);
}

3. 使用 border-radius 属性为伪元素的四个角分别设置半圆角度，将上左、上右两个角设置为圆形，下左、下右两个角设置为直角。

完整代码：

<div class="semi-circle"></div>

.semi-circle {
  position: relative;
  width: 100px;
  height: 50px;
  background-color: #f00;
}

.semi-circle:before {
  content: "";
  width: 100%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50% 50% 0 0;
  background-color: #f00;
  transform-origin: bottom;
  transform: rotate(180deg);
}

以上就是使用 HTML 和 CSS 绘制半圆的两种方法，您可以根据需要选择其中一种方法。