CSS Roate Effekt 2

Hallo, ich habe ein Beispielbild wo man sehen kann was ich fragen will. Auf der linken Seite vom Bild sieht man ein Element das ich mit CSS rotate erstellt habe Ich will mal gerne wissen, ob man mit CSS das auch so einstellen, kann das, oben gerade bleibt und unten rund

Der hier verwendete Code

<html> <head> <style> #box{ position:absolute; top:70px; left:70px; border:1px solid red; width:250px; height:250px; /*overflow:hidden:*/ } #element1{ height: 300px; width: 100px; left:75px; top:-25px; border-radius:0 0 90px 90px; animation:dreh 5s linear infinite; background:blue; position: relative; border:1px solid black; } @keyframes dreh{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } </style> </head> <body> <div id="box"> <div id="element1"></div> </div> schreib mal bei box1 overflow:hidden rein </body> </html>