css将一个圆分成四个

CSS将一个圆分成四个非常简单，只需要使用伪元素与旋转（rotation）即可。

.circle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #f0f0f0;
}
.circle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #d0d0d0;
    transform-origin: center center;
    transform: rotate(45deg);
}
.circle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #b0b0b0;
    transform-origin: center center;
    transform: rotate(-45deg);
}
    .circle >
* {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    .circle >
p {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
}
    

首先，我们需要创建一个圆形容器，设置圆形的宽度、高度、边框半径以及背景颜色。

然后，我们利用伪元素（:before, :after）来创建两个圆形覆盖在我们的原始圆形容器上。

使用transform-origin来设置旋转的中心点。

最后，在圆形容器内部添加需要呈现的元素，并进行定位。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！