css画半圆环

程序媛之博客

已于 2023-06-08 14:16:02 修改

阅读量1.7k

点赞数

文章标签： css html

于 2023-06-08 14:10:20 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42080594/article/details/131106604

版权

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