body { background: rgb(48, 52, 52) } .container { margin: 0 auto; width: 200px; position: relative; } .leaves { width: 7px; height: 70px; background: #339B00; border-radius: 0 0 10px 10px; position: absolute; left: 50%; margin-left: -4px; z-index: 1; } .leaves:after { content: ''; width: 80px; height: 80px; background: #339B00; position: absolute; border-radius: 0% 50%; transform: rotate(96deg) skew(21deg, 11deg); transform-origin: left top; top: 32px; } .leaves:before { content: ''; width: 70px; left: 8px; height: 70px; background: #339B00; position: absolute; border-radius: 0% 50%; transform: rotate(-16deg) skew(21deg, 11deg); transform-origin: left top; top: 32px; } .lemon { width: 160px; height: 160px; border-radius: 50%; background: yellow; position: absolute; transform: rotate(48deg) skew(6deg, 6deg); top: 69px; left: 50%; margin-left: -80px; } .lemon:after { content: ''; width: 50px; height: 50px; background: yellow; top: 64%; left: 50%; position: absolute; margin-left: 24px; border-radius: 19px; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter