CSS/jQuery animatie (van driehoek naar rechthoek)

[klepje]

Beste Tweakers,

ik heb een probleempje met het uitwerken van een idee van me.

Situatie:
ik heb een webpagina met in de linker bovenhoek een driehoek op mijn webpagina. Hierbij is de linkerbovenhoek de 90 graden hoek (zie eerste afbeelding). Deze wil ik echter alleen weergeven op een groot scherm, op een klein scherm moet het "overgaan" naar een rechthoek (zie tweede afbeelding).

Nu wil ik dit echter ook "mooi" bereiken, door een animatie te maken, waarbij de schuine zijde "omvalt" naar de rechthoek en dus de gehele breedte van de pagina overlapt (zie derde afbeelding (gifje)).
note: in het gifje gaat de punt linksonder iets naar beneden en daarna weer omhoog, dit kreeg ik voor nu even niet weg, maar hoort niet bij de transitie.



De html van het deel hoe het nu is, eigenlijk heel makkelijk opgebouwd: http://jsfiddle.net/j83ybsme/

Ik heb al een aantal dingen geprobeerd met CSS transitions en keyframes, maar het wil nog niet echt lukken. Heeft iemand van jullie een idee?

[MoietyMe]

Dit is niet zo lastig te maken met een simpele transition. Hier is een voorbeeld van hoe je het kan doen: Triangle to Rectangle. Tot aan 40em breed (ongeveer 640px) is het een rechthoek.

[ Voor 17% gewijzigd door MoietyMe op 25-09-2014 10:02 ]

[TheNephilim]

Probeer in plaats van een triangle met border, gewoon een normaal vierkant te draaien. Dat lijkt me al een stuk makkelijker xd

[klepje]

Wow thanks, ik zat veel te moeilijk te denken.. bedankt Good Fella!
En TheNephilim; het had inderdaad makkelijker geweest als ik het zo had gedaan

[MoietyMe]

Geen probleem

Ben wel benieuwd waar je dit voor gaat gebruiken (waarom deze transitie).

[Bosmonster]

Transities tussen responsive states zijn nogal nutteloos als je het mij vraagt. Ik zou er geen tijd aan verspillen.

[MoietyMe]

Bosmonster schreef op donderdag 25 september 2014 @ 12:41:
Transities tussen responsive states zijn nogal nutteloos als je het mij vraagt. Ik zou er geen tijd aan verspillen.

Meer dan voor 'de leuk' is het niet nee, vandaar ook mijn vraag.

[klepje]

Good Fella schreef op donderdag 25 september 2014 @ 14:14:
[...]

Meer dan voor 'de leuk' is het niet nee, vandaar ook mijn vraag.

Het is inderdaad voor de leuk, ben gewoon een aantal dingetjes aan het uitproberen