css3 圆形、圆环、半圆、四分之一圆、扇形

1. 圆形：

使用 CSS3 的 border-radius 属性，将宽高设置为相等的值即可创建圆形。

示例代码：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

2. 圆环：

在圆形的基础上，添加 border 属性控制边框宽度和颜色。

示例代码：

.ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 10px solid #000;
}

3. 半圆：

使用 CSS3 的 border-radius 属性，将宽度设置为高度的两倍，再设置 border-bottom-left-radius 和 border-bottom-right-radius 的值为 0，即可创建半圆。

示例代码：

.half-circle {
  width: 100px;
  height: 50px;
  border-radius: 100px 100px 0 0;
}

4. 四分之一圆：

在半圆的基础上，再设置 border-top-left-radius 的值为 0，即可创建四分之一圆。

示例代码：

.quarter-circle {
  width: 50px;
  height: 50px;
  border-radius: 0 50px 0 0;
}

5. 扇形：

在圆形的基础上，使用伪元素 ::before 和 ::after 创建两个三角形，再使用 transform 属性旋转其中一个三角形，即可创建扇形。

示例代码：

.sector {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}
.sector::before,
.sector::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #000;
  transform-origin: 100% 50%;
}
.sector::before {
  transform: rotate(30deg);
}

以上是几种常见的 CSS3 圆形、圆环、半圆、四分之一圆、扇形的实现方法。