主要用到了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(--theme-text-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(--theme-text-color);
position: relative;
left: 52px;
bottom: 120px;
border: 10px;
transform: rotate(-27deg);
}
.flag {
width: 80px;
height: 40px;
background-color: var(--theme-text-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>