css画半圆环

css画半圆环_第1张图片

 
                


                

                
                    

                    

                

 

   .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;
                    }
                }
            }

你可能感兴趣的:(css,html)