Kane Kane - 6 months ago 19
HTML Question

Building a circle, why do divs overlap?

Hi I'm trying to build a circle with four quarters but my divs seem to be overlapping for some reason.

How can I make it so that the bottom half of the circle does not overlap the top?

Thanks any help appreciated



body {
margin: 150px;
}

#topleft {
height: 0px;
width: 0px;
border: 90px solid red;
border-top-left-radius: 180px;
}

#topright {
height: 0px;
width: 0px;
border: 90px solid blue;
border-top-right-radius: 180px;
}
#bottomleft {
height: 0px;
width: 0px;
border: 90px solid green;
border-bottom-left-radius: 180px;
}

#bottomright {
height: 0px;
width: 0px;
border: 90px solid yellow;
border-bottom-right-radius: 180px;
}

<div>
<span id="topleft"></span>
<span id="topright"></span>
</div>
<div>
<span id="bottomleft"></span>
<span id="bottomright"></span>
</div>




Answer

Use this code

<style>
        body {
            margin: 150px;
        }

        .semi-circle-1 {
            display: flex;
        }

        .semi-circle-2 {
            display: flex;
        }

        #topleft {
            height: 0px;
            width: 0px;
            border: 90px solid red;
            border-top-left-radius: 180px;
        }

        #topright {
            height: 0px;
            width: 0px;
            border: 90px solid blue;
            border-top-right-radius: 180px;
        }

        #bottomleft {
            height: 0px;
            width: 0px;
            border: 90px solid green;
            border-bottom-left-radius: 180px;
        }

        #bottomright {
            height: 0px;
            width: 0px;
            border: 90px solid yellow;
            border-bottom-right-radius: 180px;
        }

    </style>

</head>

<body>

    <div class="semi-circle-1">
        <div id="topleft"></div>
        <div id="topright"></div>
    </div>
    <div class="semi-circle-2">
        <div id="bottomleft"></div>
        <div id="bottomright"></div>
    </div>