[CSS] Geroteerde driehoeken met content

[Ronnyrr]

He Tweakers,


Ben bezig met een klein projectje voor mezelf waarmee ik tegen een moeilijk stuk aanloop.
Onderstaand voorbeeld wil ik gaan ontwikkelen, maar loop tegen enige problemen aan met het maken van de geroteerde driehoeken.



Ben momenteel bezig met veel div's in elkaar zetten en dit proberen te kantelen.Hier mijn voortgang. Helaas wilt het nog niet echt lukken gezien de content niet gekanteld moet worden..

Iemand die mij hiermee kan helpen?
Bij voorbaat dank.

[orf]

Ik heb niet naar je opmaak gekeken, maar heb je hier iets aan? http://codepen.io/anon/pen/yyjyYO

[Ramon]

CSS transforms zijn natuurlijk wel leuk maar in dit geval niet nodig. Je kan gewoon twee afbeeldingen maken, één met het grijs boven en wit onder en eentje met het wit boven en grijs onder, en een transparante laag als achtergrond. Gewoon absoluut positioneren en je bent klaar.

[NMe]

Ramon schreef op zaterdag 21 februari 2015 @ 18:46:
CSS transforms zijn natuurlijk wel leuk maar in dit geval niet nodig. Je kan gewoon twee afbeeldingen maken, één met het grijs boven en wit onder en eentje met het wit boven en grijs onder, en een transparante laag als achtergrond. Gewoon absoluut positioneren en je bent klaar.

Maar waarom? CSS-transforms worden inmiddels heel breed ondersteund (alleen nog prefixed voor webkit en IE9, als je dat wil ondersteunen). Ik zie geen enkele reden om in plaats daarvan liever images te gebruiken.

[Ronnyrr]

Bedankt voor de hulp.
Heb het op beide manieren geprobeerd, zowel met rotatie en gradients en als met images.

Het voor de rotatie de tactiek van @orf gebruikt, werkt prima bedankt.
Bij beide komt hetzelfde eindresultaat eruit, waardoor ik (mede omdat ik <IE9 niet meer interessant acht) voor de rotatie ga. Bedankt voor de hulp.

Edit; voor andere geïnteresseerde kwam ik ook nog deze tegen: jsfiddle.net/5bGc9

[ Voor 12% gewijzigd door Ronnyrr op 22-02-2015 13:04 ]

[JaPPa03]

Ronnyrr schreef op zondag 22 februari 2015 @ 13:00:
Bedankt voor de hulp.
Heb het op beide manieren geprobeerd, zowel met rotatie en gradients en als met images.

Het voor de rotatie de tactiek van @orf gebruikt, werkt prima bedankt.
Bij beide komt hetzelfde eindresultaat eruit, waardoor ik (mede omdat ik <IE9 niet meer interessant acht) voor de rotatie ga. Bedankt voor de hulp.

Edit; voor andere geïnteresseerde kwam ik ook nog deze tegen: jsfiddle.net/5bGc9

Zie hier de exacte browsersupport voor je project: http://caniuse.com/#search=transform.