Shapes mit Abstand

Juni 2024

Ein Beispiel

Screenshot


Es bleibt bei float

Das Beispiel hier anschauen.
Der umfließende Text erklärt das Wesentliche an diesem Beispiel. Er verschweigt aber, dass der gefüllte Kreis in Wirklichkeit eine Box ist, die nach links floatet. Ihre Farbe erhält sie ganz normal per CSS. Schauen wir uns mal den HTML- und CSS-Code an.

HTML

<div class="examplecover">
  <div class="myshape" ></div>
  Dieser Text erscheint sauber fließend ...
  - weiterer Text -
</div>

CSS

.examplecover {
  font-family: sans-serif;
  font-size: 14pt;
  padding: 20pt;

  display: flow-root;
  max-width: 400pt;
  text-align: justify;
  border:1pt solid green;
}

div.myshape {
  width: 140pt;
  height: 140pt;
  background-color: #C8C87E;
  float: left;

  shape-outside: circle(60pt at 60pt);
  clip-path: circle(60pt at 60pt);
  shape-margin: 4pt;
}
Das äußere div-Element (.examplecover) umhüllt das Beispiel und grenzt es nur auf eine sinnvolle Größe ein.
Das innere div-Element (.myshape) enthält keinen Inhalt, wird aber links gefloatet und erhält per CSS Breite und Höhe sowie Hintergrundfarbe. Es ist jetzt unser Shape.
Seine kreisrunde Form erhält es von der CSS-Regel clip-path: circle(60pt at 60pt);. Der erste Wert ist der Radius, der zweite die Mittelpunktposition des Kreises von der linken Seite (in diesem Beispiel) des umgebenden Elements.
Näheres dazu im MDN zu clip-path. Gleich zu Anfang findet man ein Beispiel, mit dem demonstriert wird, dass außer Kreis auch Ellipse, Polygon und andere Formen realisierbar sind.
Wäre noch die Regel shape-margin zu erwähnen, mit der man den Abstand zwische Shape und Text bestimmen kann.
Die andere entscheidende Regel ist shape-outside: circle(60pt at 60pt);.
Diese Regel hält den Text auf Abstand vom Shape. Die Regel arbeitet völlig unabhängig von clip-path, daher wurde die circle-Funktion mit denselben Werten zugewiesen. Das lässt sich leicht demonstrieren: