css画半圆环

 <view class="circlr_css">
                <div class="a"></div>
                <div class="b"></div>
                <view class="nocolor">
                    <div class="c"></div>
                    <div class="d"></div>
                </view>
 </view>

   .circlr_css {
                position: relative;
                display: flex;
                justify-content: center;
                .a {
                    width: 200rpx;
                    height: 200rpx;
                    background-color: red;
                    border-top-left-radius: 200rpx;
                }
                .b {
                    width: 200rpx;
                    height: 200rpx;
                    background-color: red;
                    border-top-right-radius: 200rpx;
                }
                .nocolor {
                    position: absolute;
                    top: 20rpx;
                    display: flex;
                    justify-content: center;
                    .c {
                        width: 180rpx;
                        height: 180rpx;
                        background-color: #fff;
                        border-top-left-radius: 180rpx;
                    }
                    .d {
                        width: 180rpx;
                        height: 180rpx;
                        background-color: #fff;
                        border-top-right-radius: 180rpx;
                    }
                }
            }