制作彩色圆（html,css)

王猫粮

于 2023-03-20 21:19:32 发布

阅读量291

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_70684059/article/details/129676711

版权

<style>
     .divbig1{
        width: 400px;
        height: 200px;
        background: transparent;
        margin: 0 auto;
        display: flex;
    }
    .divbig2{
        width: 400px;
        height: 200pxx;
        background: transparent;
        margin: 0 auto;
        display: flex;
    }
    .div1{
        width: 200px;
        height: 200px;
        background-color: blue;
        margin: 50px auto;
        border-radius:200px 0 0 0;
    }
    .div2{
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 50px auto;
        border-radius:0 200px 0 0;
    }
    .div3{
        width: 200px;
        height: 200px;
        background-color: yellow;
        margin: 50px auto;
        border-radius:0 0 0 200px;
    }
    .div4{
        width: 200px;
        height: 200px;
        background-color: green;
        margin: 50px auto;
        border-radius:0 0 200px 0;
    }
</style>
<body>
    <!-- 两个大盒子divbig1,divbig2（是透明的背景）,采用弹性盒，
    每个大盒子内有两个小盒子div,弹性盒使两个小盒子div横向排列，每个小盒子div都是个扇形。 -->
<div class="divbig1">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
<div class="divbig2">
    <div class="div3"></div>
    <div class="div4"></div>
</div>
</body>