制作四分之一圆 CSS

如果您正在寻找一种简单的方法来创建四分之一圆，那么你来对地方了。CSS提供了多种实现方式，我们将介绍其中两种最基本的方法。

切割圆形

我们可以先将一个完整的圆形替换成一个矩形，然后将其四分之一区域分别切掉。

.quarter-circle {
  width: 50px;
  height: 50px;
  background-color: #2ecc71;
  border-top-right-radius: 50px;
  overflow: hidden;
}

.quarter-circle:before {
  content: "";
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 50px;
  background-color: #fff;
  transform: translateX(-25px) translateY(25px) rotate(-45deg);
}

如上代码，.quarter-circle 指定了一个宽高均为50像素的元素，使用了 border-top-right-radius 属性创建了一个完整的圆角。overflow:hidden 能够隔离出四分之一圆形。

然后，使用伪元素 :before 创建一个 50x50 的白色圆形。它被旋转了45度，用来替代原来的圆形的4个象限。

使用连续的旋转操作

我们也可以使用连续的旋转操作来创建一个四分之一圆。这种方法可能不如切割圆形的方法方便，但它为您提供了更细致的控制。

.quarter-circle {
  width: 50px;
  height: 50px;
  border-radius: 50px 0 0 0;
  background-color: #2ecc71;
  transform: rotate(-45deg);
  transform-origin: bottom right;
}

在样式中，我们为元素设置了 width 和 height，用来定义四分之一圆形的大小。border-radius 属性创建了一个圆角，在这个例子中，它定义了一个 50x50 的圆角。transform 属性旋转了元素45度，transform-origin 属性设置圆心的位置。

在上面的代码中，我们只定义了一个四分之一圆形，如果你需要创建更多的象限，可以使用更多的 transform 操作，如下所示：

.quad {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 1px solid #ccc;
  position: relative;
}

.quad-1 {
  background-color: #2ecc71;
}

.quad-2 {
  background-color: #e74c3c;
  transform: rotate(90deg);
}

.quad-3 {
  background-color: #3498db;
  transform: rotate(180deg);
}

.quad-4 {
  background-color: #f1c40f;
  transform: rotate(270deg);
}

.quad:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.quad-2:before {
  background-color: #e74c3c;
  transform: translateX(-100%) rotate(180deg);
}

.quad-3:before {
  background-color: #3498db;
  transform: translate(-100%, -100%) rotate(270deg);
}

.quad-4:before {
  background-color: #f1c40f;
  transform: translateY(-100%) rotate(360deg);
}

上述代码中 .quad 容器包含四个象限，分别为 .quad-1，.quad-2，.quad-3 和 .quad-4。每个象限都是一个四分之一圆形，分别旋转了相应的角度。

.quad 的伪元素 :before 用来创建填充整个象限的圆形，如下所示：

• .quad-1:before 可以不用指定位置和旋转。
• .quad-2:before 使用 transform: translateX(-100%) rotate(180deg) 将圆形移动到正确的位置。
• .quad-3:before 通过 transform: translate(-100%, -100%) rotate(270deg) 移动圆形和旋转到正确的角度。
• .quad-4:before 使用 transform: translateY(-100%) rotate(360deg) 来移动圆形到正确的位置。

总之，以上两种方法都可以用来制作四分之一圆形，并且都能够以各种方式进行更改和定位。