wie Clip-Pfad mit Text innerhalb der Div zu verwenden?

Question

Ich habe versucht, die folgenden:

http://codepen.io/anon/pen/YXePBY

<div>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div> 

div { 
    width: 280px; 
    height: 280px; 
    background: #1e90ff; 
    -webkit-clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%); 
    clip-path: polygon(0 0, 78% 0, 93% 99%, 0% 100%); 
    padding: 15px 
} 

/* Center the demo */ 
html, body { height: 100%; } 
body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

, was ich will, ist, dass der Text innerhalb des div einen Zeilenumbruch wird, wenn sie die Grenze 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?

Answer 1

Sie können dies nicht mit Clip-Pfad allein tun.

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 here und here gehen ins Detail. Zunächst definieren Sie ein Element mit einer CSS-Shape-Deklaration. Dann verwenden Sie einen Clip-Pfad, mit der gleichen Definition wie die Polygondefinition, die Ihre Form

aus dem ersten Artikel Genommen betrifft eine des Hintergrunds Clip entfernt (und günstig in der Nähe zu dem, was Sie wollen):

.shaped{ 
    /*...*/ 
    shape-outside: polygon(0 0, 100% 0, 100% 100%, 30% 100%); 
    shape-margin: 20px; 
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%); 
} 

Wir können sehen, es ist ziemlich einfach, die Form wird als ein Polygon definiert und es wird sich wie jeder andere Block verhalten, außer dass es eine Polygonkante und keine Blockkante hat. Wenn Sie das Element schweben lassen, wird der Text um ihn herum fließen.

Hier ist ein Beispiel at JSFiddle * (-webkit- Präfixe sind erforderlich, wie ein WebKit-Browser wie Google Chrome). Mit Blick auf this JSFiddle *, bevor clip-path angewendet wird, können Sie sehen, warum es notwendig ist. In meinem Beispiel befinden sich sowohl .shaped als auch .text im gleichen 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 JSFiddle-Panel-Größe anpassen, um Dinge 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-Formen als Standard verwenden und lassen Sie die neuen Browser damit umgehen (Firefox wird bald ich bin sicher), aber bieten eine Art von browser feature detection method wie Modernizr zu Entscheiden Sie, ob Sie ein Fallback anwenden möchten, bei dem die beiden Abschnitte als Blöcke ohne Neigung angezeigt werden.