tempDownload

主要用到了relative定位、border的垂直和水平分量，之所以用区块遮盖实现内凹，因为radial-gradient我不太熟悉。

<head>
    <style>
         :root {
            --color: rgb(68, 202, 68);
        }
        
        .div {
            width: 240px;
            height: 240px;
            border-radius: 120px;
            background-color: rgb(235, 227, 128);
        }
        
        .music {
            --vertical: 40px;
            --horizontal: 50px;
            width: 100px;
            height: 80px;
            background: var(--color);
            border-bottom-left-radius: var(--horizontal) var(--vertical);
            border-bottom-right-radius: var(--horizontal) var(--vertical);
            border-top-left-radius: var(--horizontal) var(--vertical);
            border-top-right-radius: var(--horizontal) var(--vertical);
            position: relative;
            top: calc(100% - 90px);
            left: calc((100% - 100px)/2);
        }
        
        .pole {
            height: 170px;
            width: 10px;
            background: var(--color);
            position: relative;
            left: 52px;
            bottom: 120px;
            border: 10px;
            transform: rotate(-27deg);
        }
        
        .flag {
            width: 80px;
            height: 40px;
            background-color: var(--color);
            border-bottom-right-radius: 60px 35px;
        }
        
        .block {
            background: rgb(235, 227, 128);
            width: 80px;
            height: 20px;
            border-bottom-left-radius: 70px 20px;
            position: relative;
            bottom: 1px
        }
    </style>
</head>

<body>
    <div class="div">
        <div class="music">
            <div class="pole">
                <div class="flag">
                    <div class="block"></div>
                </div>
            </div>
        </div>

    </div>
</body>