CSS Roate Effekt


son gohan

Erfahrenes Mitglied
#1
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

basti1012

Erfahrenes Mitglied
#2
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 Eltern elements ist. Dazu müsste man deinen ganzen Code sehen.
Wenn dann musd dein dreh Element so positioniert sein das es die außen Wände des Eltern Elements nicht überschneidet oder du mußt kucken ob du da overflow:hidden stehen hast .
Kuck mal hier was passiert wenn du overflow:hidden rein schreibst dann siehst du was ich meine
XGNzRQ
 
Zuletzt bearbeitet:

Sempervivum

Erfahrenes Mitglied
#3
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.
 

basti1012

Erfahrenes Mitglied
#4
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.
rotate mit skew begradiegen
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