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

basti1012

Erfahrenes Mitglied
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
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
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.
CSS Roate Effekt
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:

Neue Beiträge