CSS - Dreieck umfließen

klanawagna

Erfahrenes Mitglied
Liebe Leute, mich plagt eine Spielerei.

ich habe mit folgendem Code ein Dreieck, welches Links unten dargestellt wird.

CSS:
#dreieck {
	position: absolute; 
	right: 0px; 
	bottom: 0px;
	width: 0; 
	height: 0; 
	border-top: 100px solid transparent; 
	border-bottom: 100px solid red; 
	border-left: 340px solid transparent; 
	border-right: 340px solid red;
	z-index: -1;
}

Ich will, dass Text das Dreieck umfließt. Das Problem: der z-index muss aus anderen Gründen so klein sein und ansonsten gibt es das Problem, dass es trotzdem als Viereck gesehen wird.

Wenn es gar nicht geht reicht ein einfaches Nein, wenn es einen weg gibt (bitte keine JS-Spielerei ^^) bitte bitte bitte was sagen!

lg
klanawagna
 
... ich habe mit folgendem Code ein Dreieck, welches Links unten dargestellt wird...
Wieso sollte das ein Dreieck sein? Das ist irgendein rechteckiges Blockelement mit jeweils 100px Rand oben und unten und jeweils 340px Rand links und rechts. Dabei ist egal, ob die Randfarbe rot oder transparent ist .

... Ich will, dass Text das Dreieck umfließt...
Ein absolut positioniertes Blockelement ist aus dem normalen Textfluss herausgelöst. Also keine gute Idee das so realisieren zu wollen.

Sieh dir bitte mal bei Stu Nicholls an, wie der das gelöst hat. Wenn ich mich recht erinnere ist das ein ganz ordentlicher Aufwand.
Bei Eric Meyer gibt es wohl auch ein Beispiel für dein Vorhaben, aber da bin ich jetzt zu faul zum ...
 
Zuletzt bearbeitet:
Zurück