* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
}

.circle {
    width: 100px;
    margin: 0 auto;
    height: 100px;
    transform: rotate(90deg);
    clip-path: circle(50% at 50% 100%);
    background-color: #000000;
}

.circles {
    width: 100px;
    height: 100px;
    margin-top: 5px;
    clip-path: circle(50% at 50% 100%);
    background-color: rgb(255, 255, 255);
}