HTML，css需要帮助 div样式需要帮助

这样的div样式怎么弄请求帮助 我是新学的爱好者

<style>
    .cycle {
        background: #000;
        width: 100px;
        height: 100px;
        margin: 100px auto 0;
        border-radius: 50px 50px 0 0;
        position: relative;
    }

    .cycle::before,
    .cycle::after {
        content: '';
        display: block;
        background: #000;
        width: 100px;
        height: 100px;
        position: absolute;
    }

    .cycle::before {
        left: -100px;
    }

    .cycle::after {
        right: -100px;
    }

    .left-corner,
    .right-corner {
        width: 100px;
        height: 100px;
        position: absolute;
        top: 0px;
        z-index: 10;
        background: #fff;
    }

    .left-corner {
        border-bottom-right-radius: 60%;
        left: -100px;
    }

    .right-corner {
        border-bottom-left-radius: 60%;
        right: -100px;
    }

    .block {
        background: #000;
        height: 100px;
        width: 500px;
        margin: 0 auto;
    }
</style>
<div class="cycle">
    <div class="left-corner"></div>
    <div class="right-corner"></div>
</div>
<div class="block"></div>