Ich habe folgendes versucht:
%Vor%Was ich will ist, dass der Text innerhalb der div einen Zeilenumbruch bekommt, wenn er den Rand erreicht. Wie ist das möglich?
und wie bekomme ich die höchste Browserkompatibilität?
gibt es vielleicht eine Möglichkeit, dies mit SVGs zu machen?
Sie können dies nicht mit dem Clip-Pfad alleine machen.
Der Clip-Pfad wird unabhängig vom Inhalt auf das Element angewendet. Es ist eine Definition der äußeren Grenzen eines Elements, aber eine Definition der Art und Weise, wie das Element innerhalb seiner Grenzen abgeschnitten wird, daher verhält sich der Text nicht wie erwartet. Es erfordert immer noch, dass das Element eine Box ist, denn derzeit in CSS sind alle Dinge Boxen.
Es ist jedoch möglich. Diese beiden Artikel hier und bei JSFiddle * ( -webkit- Präfixe sind erforderlich, ebenso wie ein WebKit Browser wie Google Chrome ). Wenn Sie dieses JSFiddle * betrachten, bevor clip-path angewendet wird, können Sie sehen, warum dies notwendig ist. In meinem Beispiel befinden sich sowohl .shaped als auch .text im selben Container, aber als Geschwister. Der Text fließt um seine Geschwister, statt sich zu erweitern, um den Container zu füllen. Der Container selbst und die Verwendung von Hintergrundfarben erzielen den Effekt im Mock-Up. (Sie müssen möglicherweise die Größe des JSFiddle-Bedienfelds anpassen, um Objekte zu quetschen oder zu dehnen und den Effekt deutlich zu sehen.)
Leider sind CSS-Formen sehr frisch. Ein kurzer Blick auf caniuse.com zeigt, dass kaum die Hälfte der aktuellen Browser diese unterstützt. Selbst Firefox hat in der aktuellen Version überhaupt keine Implementierung. Wie für IE ...
Was ich vorschlagen würde ist, dass Sie css shapes als Standard verwenden und die neuen Browser damit umgehen lassen (Firefox wird bald nachholen), aber stellen Sie mir eine Art Browserfeature-Erkennungsmethode wie Modernizr, um zu entscheiden, ob ein Fallback angewendet werden soll oder nicht, der die beiden Bereiche als Blöcke ohne Schräglage anzeigt.