CSS 创建一个 正确跟错误的圆

错误

  // width: 180px;
    // height: 180px;
    // margin: 0 auto;
    // background-color: red;
    // border-radius: 50%;
    // margin-bottom: 20px;
    // margin-top: 30px;
    // position: relative;
    // // position: absolute;
    //     // width:40rpx;
    //     // height: 40rpx;
    //     // border: 2rpx solid;
    //     // border-radius: 40rpx;
    // &::before,&::after {
    //     position: absolute;
    //     content: ' ';
    //     background-color: #fff;
    //     width: 110px;
    //     height: 13px;
    //     left: 50%;
    //     top: 50%;
    //     margin-left: -55px;
    //     margin-top: -7px;
    // }
    // &::before {
    //     transform: rotate(45deg);
    // }
    
    // &::after {
    //     transform: rotate(-45deg);
    // }

正确

 width: 180px;
//  height: 180px;
//  margin: 0 auto;
//  background-color: royalblue;
//  border-radius: 50%;
//  margin-bottom: 20px;
//  display: flex;
//  justify-content: center;
//  align-items: center;
//  &::before {
//      content: "";
//      display: block;
//      width: 100px;
//      height: 50px;
//      border: 20px solid #fff;
//      border-right: none;
//      border-top: none;
//      transform: rotate(-40deg) translate(10px, -10px);
//    }