主要用到了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>