CSS Roate Effekt

son gohan

Erfahrenes Mitglied
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 hier der CSS Code dazu:

HTML:
#element1
{
    height: 457px;
    width: 159px;
    left:173px;
    top:260px;
    border-radius:0 0 90px 100px;
    transform: rotate(-20deg);

    position: absolute;
    overflow: hidden;
}

Ich will mal gerne wissen ob man mit CSS dass auch so einstellen kann das oben gerade bleibt und unten rund, siehe Bild.
 

Anhänge

  • beispiel.png
    beispiel.png
    15,1 KB · Aufrufe: 4
He ? Das verstehe ich nicht, was du meinst . Mach rotate auf 0 dann ist es gerade . Eine genauere Erklärung wäre schon ganz nett.
EDIT:
Oder meinst du das oben so schief abgeschnitten ist ?
Das legt wohl daran das dein dreh Element unterhalb des Elternelements ist. Dazu müsste man deinen ganzen Code sehen.
Wenn dann muss dein dreh Element so positioniert sein das es die außen Wände des Elternelements nicht überschneidet oder du musst kucken ob du da overflow:hidden stehen hast .
Guck mal hier was passiert, wenn du overflow:hidden reinschreibst dann siehst du was ich meine

Link zur Lösung
 
Zuletzt bearbeitet:
Ich verstehe den TO eher so, dass er oben einen geraden Abschluss nach dem Drehen haben will und dann ist das, was Du, Basti, als Problemursache beschrieben hast, eine mögliche Lösung, nämlich den Balken durch einen umschließenden Container oben gerade abschneiden zu lassen.
 
Ja, wenn ich den Beitrag vom To nochmal lese könntest du auch recht haben.
Dann bleibt ja nur den Eltern Container overflow:hidden zu geben.
Falls das aber nicht möglich ist kann man mit etwas gedult auch skew nehmen.

Link zur Lösung

Geht aber auch nur wenn es nicht beweglich ist weil sonst müsste man ein Mathe Genie sein die Border radiuse anzupasen.

Die blauen Figuren kannst du verschieben damit du siehst das die fast die gleichen radiuse haben ,weil skew macht den Radius eigentlich krum.
Deswegen sage ich ja ,wenn es nur eine Figur ist die sich nicht bewegt könnte man das auch so mahen
 
Zuletzt bearbeitet:
Zurück