shape-outside

Die `shape-outside`-Eigenschaft steuert, wie Inhalt um den Begrenzungsrahmen eines gefloateten Elements fließt. Typischerweise wird dies so gehandhabt, dass Text über eine Form wie einen Kreis, eine Ellipse oder ein Polygon umgebrochen werden kann.

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

Es ist wichtig zu beachten, dass diese Eigenschaft derzeit nur bei gefloateten Elementen funktioniert, obwohl sich dies wahrscheinlich in Zukunft ändern wird. Die `shape-outside`-Eigenschaft kann auch mit Übergängen oder Animationen manipuliert werden.

Werte

• circle(): Zum Erstellen von Kreisformen.
• ellipse(): Zum Erstellen von elliptischen Formen.
• inset(): Zum Erstellen von rechteckigen Formen.
• polygon(): Zum Erstellen beliebiger Formen mit 3 oder mehr Eckpunkten.
• url(): Gibt an, welches Bild zum Umfließen von Text verwendet werden soll.
• initial: Der Float-Bereich wird nicht beeinflusst.
• inherit: Erbt den `shape-outside`-Wert vom übergeordneten Element.

Die folgenden Werte geben an, welche Referenz des Box-Modells für die Positionierung der Form innerhalb verwendet werden soll.

• margin-box
• padding-box
• border-box

Diese Werte sollten am Ende angehängt werden, zum Beispiel: `shape-outside: circle(50% at 0 0) padding-box`. Standardmäßig wird die `margin-box`-Referenz verwendet.

ellipse()

.element {
  shape-outside: ellipse(150px 300px at 50% 50%);
}

Die Funktion `ellipse()` erfordert die Radienwerte für die x- und y-Achse der Ellipse, gefolgt von den Koordinaten zur Positionierung des Mittelpunkts der Form innerhalb ihres Begrenzungsrahmens. Das obige Beispiel positioniert beispielsweise den Mittelpunkt der Ellipse in der vertikalen und horizontalen Mitte des `.element`-Divs.

Obwohl die obige Demo darauf hindeuten mag, dass wir die Form des `div` selbst ändern, werden wir, wenn wir Ränder und ein Hintergrundbild hinzufügen, feststellen, dass der Begrenzungsrahmen tatsächlich immer noch rechteckig ist.

Es ist vielleicht besser, es so zu sehen: Mit der `shape-outside`-Eigenschaft ändern wir die Beziehung anderer Elemente um ein Element herum, nicht die Geometrie des Elements selbst. Um das zu beheben, müssen wir `shape-outside` zusammen mit der `clip-path()`-Eigenschaft verwenden, wie in diesem Beispiel.

circle()

.element {
  shape-outside: circle(50%);
}

Diese Funktion erstellt einen Kreis. Im obigen Codebeispiel wird ein Kreis mit einem Radius erstellt, der die halbe Höhe und Breite von `.element` beträgt. Die `circle()`-Funktion kann auch dieselbe Syntax für die Positionierung der Form verwenden.

url()

.element {
  shape-outside: url('circle.png'); 
}

In diesem Fall haben wir zwei gefloatete Bilder, eines auf jeder Seite eines Textblocks. Da beide Bilder die `shape-outside`-Eigenschaft gesetzt haben, wird der darunterliegende Text diese beiden Floats vermeiden.

Es ist auch möglich, die `shape-image-threshold`-Eigenschaft festzulegen, die dem Browser mitteilt, welche Pixel, abhängig von ihrer Transparenz, die Form erstellen sollen. Zum Beispiel:

.element {  
  shape-outside: url('image.png'); 
  shape-image-threshold: 0.5;
}

In diesem Beispiel müssen die einzigen Pixel, die die Form erstellen, eine Transparenz von 50 % oder mehr aufweisen. Werte von `0.0` (transparent) bis `1.0` (opak) sind gültig.

polygon()

.element {
  shape-outside: polygon(0 0, 0 200px, 300px 600px);
}

Diese Funktion erstellt jede Form mit drei oder mehr Eckpunkten, zum Beispiel:

Es ist wichtig zu beachten, dass, wenn diese Eigenschaft animiert werden soll, sie die gleiche Anzahl von Eckpunkten erfordert, wenn Sie den animierten Zustand deklarieren.

.element {  
  shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: shape-outside 1s;
}
.element:hover {  
	shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%);
}

inset()

.element {
  shape-outside: inset(100px 100px 100px 100px 10px);
  /* shape-outside: inset(top right bottom left border-radius); */
}

`inset()` ist eine Funktion zur Erstellung rechteckiger Formen. Sie nimmt fünf Parameter, wobei der fünfte für `border-radius` optional ist. Die anderen Argumente sind Einrückungen vom Rand des `.element` nach innen.

Oben sehen wir ein Element, das 200px breit und 200px hoch ist, und wir rücken die Form innen um 50px in jede Richtung außer der linken Seite ein. So wird der Text über der Form umbrochen, obwohl sich der Div bis nach oben erstreckt.

Verwandte Eigenschaften

• clip-path
• shape-image-threshold
• shape-margin

Weitere Ressourcen

• CSS-Formen auf W3C
• shape-outside auf MDN
• Erste Schritte mit CSS Shapes
• CSS-Formen auf A List Apart

Browser-Unterstützung