shape-outside

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Die shape-outside CSS Eigenschaft definiert eine Form – die nicht-rechteckig sein kann –, um die sich angrenzender Inline-Inhalt wickeln soll. Standardmäßig wickelt sich Inline-Inhalt um seine Margin-Box; shape-outside bietet eine Möglichkeit, dieses Wickeln anzupassen und es möglich zu machen, Text um komplexe Objekte statt um rechteckige Boxen wickeln zu lassen.

Probieren Sie es aus

shape-outside: circle(50%);

shape-outside: ellipse(130px 140px at 20% 20%);

shape-outside: url(/shared-assets/images/examples/round-balloon.png);

shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

<section class="default-example" id="default-example">
  <div class="example-container">
    <img
      class="transition-all"
      id="example-element"
      src="/shared-assets/images/examples/round-balloon.png"
      width="150" />
    We had agreed, my companion and I, that I should call for him at his house,
    after dinner, not later than eleven o’clock. This athletic young Frenchman
    belongs to a small set of Parisian sportsmen, who have taken up “ballooning”
    as a pastime. After having exhausted all the sensations that are to be found
    in ordinary sports, even those of “automobiling” at a breakneck speed, the
    members of the “Aéro Club” now seek in the air, where they indulge in all
    kinds of daring feats, the nerve-racking excitement that they have ceased to
    find on earth.
  </div>
</section>

.example-container {
  text-align: left;
  padding: 20px;
}

#example-element {
  float: left;
  width: 150px;
  margin: 20px;
}

Syntax

css

/* Keyword values */
shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* Shape box with basic shape */
shape-outside: circle() border-box;
shape-outside: margin-box ellipse();

/* <url> value */
shape-outside: url(image.png);

/* <gradient> value */
shape-outside: linear-gradient(45deg, #fff 150px, red 150px);

/* Global values */
shape-outside: inherit;
shape-outside: initial;
shape-outside: revert;
shape-outside: revert-layer;
shape-outside: unset;

Die shape-outside Eigenschaft wird mit den Werten aus der untenstehenden Liste angegeben, die den Float-Bereich für Fließ-Elemente definieren. Der Float-Bereich bestimmt die Form, um die sich Inline-Inhalt (Fließ-Elemente) wickeln.

Werte

none

Der Float-Bereich wird nicht beeinflusst. Inline-Inhalt wickelt sich wie gewohnt um die Margin-Box des Elements.

<shape-box>

Der Float-Bereich wird entsprechend der Form der Kanten eines Fließ-Elements berechnet (wie im CSS Box Modell definiert). Dies kann margin-box, border-box, padding-box oder content-box sein. Die Form schließt jegliche Krümmung ein, die durch die border-radius Eigenschaft erzeugt wird (ähnliches Verhalten wie bei background-clip).

margin-box: Definiert die Form, die vom äußeren Rand der Margin eingeschlossen wird. Die Eckenradien dieser Form werden durch die entsprechenden border-radius und margin Werte bestimmt. Wenn das Verhältnis von border-radius / margin 1 oder mehr ist, dann ist der Eckenradius der Margin-Box border-radius + margin. Wenn das Verhältnis kleiner als 1 ist, dann ist der Eckenradius der Margin-Box border-radius + (margin * (1 + (ratio - 1) ^ 3)).
border-box: Definiert die Form, die vom äußeren Rand des Borders eingeschlossen wird. Die Form folgt den normalen Regeln zur Formgebung des Border-Radius für die Außenseite des Borders.
padding-box: Definiert die Form, die vom äußeren Rand des Paddings eingeschlossen wird. Die Form folgt den normalen Regeln zur Formgebung des Border-Radius für die Innenseite des Borders.
content-box: Definiert die Form, die vom äußeren Rand des Inhalts eingeschlossen wird. Jeder Eckenradius dieser Box ist das größere von 0 oder border-radius - border-width - padding.

<basic-shape>

Der Float-Bereich wird basierend auf der Form berechnet, die durch eine inset(), circle(), ellipse(), oder polygon() Funktion erstellt wird; andere <basic-shape> Funktionen sind ungültig. Wenn zusätzlich ein <shape-box> angegeben wird, definiert dieser die Referenzbox für die <basic-shape> Funktion. Andernfalls ist die Referenzbox standardmäßig margin-box.

<image>

Der Float-Bereich wird basierend auf dem Alphakanal des angegebenen <image> extrahiert und berechnet, wie in shape-image-threshold definiert.

Hinweis: Wenn das Bild ungültig ist, ist der Effekt, als ob das Schlüsselwort none angegeben worden wäre. Außerdem muss das Bild mit CORS Headern geliefert werden, die seine Nutzung erlauben.

Formale Definition

Anfangswert	`none`
Anwendbar auf	Flusselemente
Vererbt	Nein
Berechneter Wert	wie definiert für `<basic-shape>` (gefolgt von `shape-box`, falls angegeben), dem `<image>`, dessen URI absolut gemacht wurde, ansonsten wie angegeben.
Animationstyp	ja, wie angegeben für `<basic-shape>`, ansonsten nein

Formale Syntax

shape-outside = 
  none                              |
  [ <basic-shape> || <shape-box> ]  |
  <image>                           

<shape-box> = 
  <visual-box>  |
  margin-box    

<image> = 
  <url>       |
  <gradient>  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Text kanalisieren

HTML

html

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>
    Sometimes a web page's text content appears to be funneling your attention
    towards a spot on the page to drive you to follow a particular link.
    Sometimes you don't notice.
  </p>
</div>

CSS

css

.main {
  width: 530px;
}

.left,
.right {
  background-color: lightgray;
  height: 12ex;
  width: 40%;
}

.left {
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
}

.right {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
}

p {
  text-align: center;
}

Ergebnis

Spezifikationen

Specification
CSS Shapes Module Level 1 # shape-outside-property