<style>
#wrap {
	margin: 20px auto;
	position: relative;
	width: 200px;
	height: 200px;
	animation: rot 6s linear infinite;
}
ye-zi {
	position: absolute;
	left: calc(50% - 0.5 * var(--ww));
	top: 0;
	width: var(--ww);
	height: 100px;
	border-radius: 0% 100%;
	background: linear-gradient(red, orange, green);
	transform-origin: 50% 100%;
	transform: rotate(var(--deg));
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="wrap"></div>

<script>
let all = 5;
Array.from({length: all}).forEach((item,key) => {
	item = document.createElement('ye-zi');
	item.style.cssText += `--ww: 30px; --deg: ${360 / all * key}deg;`;
	wrap.appendChild(item);
});
</script>