W3docs
de
Anmelden

CSS shape-outside Eigenschaft

Mit der CSS-Eigenschaft shape-outside kann Inhalt um eine bestimmte Form fließen. Werte und Beispiele im Überblick.

Die CSS-Eigenschaft shape-outside definiert eine Form, um die benachbarter Inline-Inhalt (in der Regel Text) herumfließt. Sie ermöglicht es, aus dem rechteckigen Box-Modell auszubrechen und Text entlang eines Kreises, einer Ellipse, eines Polygons oder sogar der Silhouette eines Bildes fließen zu lassen.

Standardmäßig fließt Inline-Inhalt um die rechteckige Margin Box eines gefloateten Elements herum. Die Eigenschaft shape-outside ersetzt dieses Rechteck durch eine benutzerdefinierte Form, sodass der Text Kurven und Winkeln folgt statt geraden Kanten.

Diese Seite erklärt, was shape-outside bewirkt, welche Werte sie akzeptiert (<basic-shape>, <shape-box> und <image>), enthält ausführbare Beispiele für jeden Wert und zeigt die häufigsten Fallstricke, die man kennen muss.

Wann und warum man es verwendet

Verwenden Sie shape-outside, wenn Text ein nicht-rechteckiges Objekt umfließen soll — beispielsweise ein Absatz um einen kreisförmigen Avatar, ein dreieckiges Pull-Quote oder ein freigestelltes Produktfoto. Es ist ein rein visuelles, präsentationsbezogenes Feature: Es verändert, wie Text fließt, nicht die eigentliche Geometrie des Elements. Das Element selbst bleibt eine rechteckige Box.

Drei Regeln sind unbedingt zu beachten:

  • Das Element muss gefloatet sein. shape-outside wirkt nur auf gefloatete Elemente (float: left oder float: right). Bei nicht-gefloateten Elementen wird es ignoriert.
  • Das Element benötigt eine Breite und Höhe. Eine <basic-shape> wie circle() wird relativ zur Box des Elements aufgelöst, daher muss die Box explizite Abmessungen haben.
  • shape-outside beschneidet das Element nicht. Es verändert nur den Float-Bereich, den Text vermeidet. Um die Box visuell auf dieselbe Form zuzuschneiden, kombinieren Sie es mit der Eigenschaft clip-path und derselben Form-Funktion (dies ist in den Beispielen unten zu sehen).

Animationen und Übergänge können shape-outside beeinflussen, wenn der Wert eine <basic-shape> ist.

AnfangswertNone
Gilt fürAlle Elemente.
VererbbarNein.
AnimierbarJa, wie für <basic-shape> angegeben.
VersionCSS3
DOM-Syntaxobject.style.shapeOutside = "margin-box";

Syntax

shape-outside: none | <shape-box> | <basic-shape> | <image> | initial | inherit;

Die Begleiteigenschaft shape-margin fügt zwischen der Form und dem umfließenden Text Abstand hinzu, und shape-image-threshold steuert, welche Pixel eines Bildes berücksichtigt werden, wenn der Wert ein <image> ist.

Beispiel: Text um eine Ellipse fließen lassen

Die Formfunktion ellipse() nimmt zwei Radien und eine optionale Position entgegen. Beachten Sie, wie clip-path denselben Wert wiederholt, damit die sichtbare grüne Box der Form entspricht, um die der Text fließt.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        shape-outside: ellipse(120px 200px at 40% 50%);
        clip-path: ellipse(120px 200px at 40% 50%);
        width: 300px;
        height: 500px;
        float: right;
        opacity: 0.6;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside property example</h2>
    <div></div>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>
Probier es selbst »

Beispiel: Text um ein Bild fließen lassen

Wenn der Wert eine url() ist, die auf ein Bild zeigt, erstellt der Browser die Form aus dem Alpha-Kanal des Bildes — der Float-Bereich folgt den nicht-transparenten (opaken) Pixeln. Dies funktioniert nur bei Bildern, die CORS-Zugriff erlauben, und das Bild benötigt Transparenz, damit der Effekt sichtbar ist.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      img {
        width: 250px;
        shape-outside: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
      }      
      .left {
        float: left;
      }      
      .right {
        float: right;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside property example</h2>
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="left" />
    <img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="tree" class="right" />
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>
Probier es selbst »

Beispiel: Text um ein Polygon fließen lassen

Die Funktion polygon() akzeptiert eine Liste von x y-Koordinatenpaaren, die die Eckpunkte der Form definieren. Verwenden Sie sie für Dreiecke, Pfeile oder beliebige Freiformen mit drei oder mehr Punkten.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        shape-outside: polygon(0 0, 0 200px, 300px 600px);
        clip-path: polygon(0 0, 0 200px, 300px 600px);
        width: 300px;
        height: 300px;
        float: left;
        opacity: 0.3;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Shape-outside property example</h2>
    <div></div>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibung
noneEs wird keine Form angewendet. Der Float-Bereich des Elements wird nicht beeinflusst.
<shape-box>Der Float-Bereich wird anhand der Form der Kanten eines gefloateten Elements bestimmt. <shape-box> kann einen der vier Werte annehmen: margin-box, border-box, padding-box, content-box. Etwaige Kurven in der Form werden durch die Eigenschaft border-radius erzeugt.
<basic-shape>Der Float-Bereich wird durch eine Formfunktion bestimmt: inset() für eingefügte Rechtecke, circle() für Kreise, ellipse() für Ellipsen und polygon() für beliebige Formen mit drei oder mehr Eckpunkten.
<image>Die Form wird aus dem Alpha-Kanal des angegebenen <image> extrahiert und bestimmt.
initialSetzt die Eigenschaft auf ihren Standardwert zurück.
inheritErbt die Eigenschaft vom übergeordneten Element.

Häufige Fallstricke

  • Nichts passiert, wenn das Element nicht gefloatet ist. Dies ist der mit Abstand häufigste Fehler. shape-outside wird stillschweigend ignoriert, wenn kein float: left oder float: right gesetzt ist.
  • Die Box sieht weiterhin rechteckig aus. shape-outside verändert nur den Float-Bereich, nicht das Aussehen des Elements. Fügen Sie ein passendes clip-path hinzu, wenn die Box visuell auf die Form zugeschnitten werden soll.
  • Prozentwerte werden relativ zur Box des Elements aufgelöst, daher produziert ein Element ohne Höhe (oder ein zusammengefallenes) nicht die erwartete Form.
  • Verwenden Sie shape-margin für Luft. Text kann direkt an den Formrand stoßen; shape-margin fügt einen gleichmäßigen Abstand hinzu.

Browser-Unterstützung

shape-outside wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari und Opera). Es degradiert graceful: In einem Browser, der es nicht unterstützt, fließt Text einfach um die rechteckige Box des Elements herum.

Verwandte Eigenschaften

  • float — erforderlich, damit shape-outside wirkt.
  • border-radius — rundet die Ecken des <shape-box>-Werts ab, denen shape-outside dann folgt.

Übung

Übung
Was bewirkt die CSS-Eigenschaft 'shape-outside'?
Was bewirkt die CSS-Eigenschaft 'shape-outside'?
Was this page helpful?