Shape winding around

The shape-outside property in CSS3 makes it possible for text to wrap around irregular shapes, breaking the limitations of traditional rectangular layouts. Combined with floated elements, it enables more flexible text-image mixing effects.

Basic Principles of Shape Wrapping

The shape-outside property must be used in conjunction with the float property. When an element is floated, the surrounding content will wrap around the specified shape. The property accepts various types of values:

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

Key points:

1. The float property must be set (left or right)
2. The element must have explicit width and height
3. The shape does not alter the element's display itself, only affecting the external content flow

Basic Shape Functions

CSS3 provides four basic shape functions:

Circle Function

.circle {
  shape-outside: circle(50% at 50% 50%);
  /* Radius 50%, center at the element's midpoint */
}

The radius can be a length value or percentage, and the coordinates after at define the center position. In practical cases, circular wrapping is particularly suitable for avatar-text combinations:

<div class="avatar"></div>
<p>Here is the wrapping text content...</p>

<style>
.avatar {
  float: left;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  shape-outside: circle();
  background: url(avatar.jpg) center/cover;
}
</style>

Ellipse Function

.ellipse {
  shape-outside: ellipse(100px 150px at 30% 50%);
  /* Horizontal radius 100px, vertical radius 150px */
}

Ellipses are common in magazine-style layouts, such as:

.poster {
  float: right;
  width: 300px;
  height: 450px;
  shape-outside: ellipse(120px 180px at 70% 50%);
  clip-path: ellipse(120px 180px at 70% 50%);
}

Polygon Function

Polygons can achieve the most complex effects:

.star {
  shape-outside: polygon(
    50% 0%, 61% 35%, 98% 35%,
    68% 57%, 79% 91%, 50% 70%,
    21% 91%, 32% 57%, 2% 35%, 39% 35%
  );
}

Practical application example:

<div class="diamond"></div>
<p>Text will wrap around the diamond's edges...</p>

<style>
.diamond {
  float: right;
  width: 200px;
  height: 200px;
  shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}
</style>

Rectangle Function

.rectangle {
  shape-outside: inset(10px 20px 30px 40px round 15px);
  /* Top, right, bottom, left inset distances + corner radius */
}

Creating Shapes with Images

Beyond basic shapes, you can also use an image's alpha channel to define shapes:

.image-shape {
  shape-outside: url('cloud.png');
  shape-image-threshold: 0.5;
  /* Defines the transparency threshold */
}

Complete example:

<div class="cloud"></div>
<p>Text will flow along the cloud's outline...</p>

<style>
.cloud {
  float: left;
  width: 300px;
  height: 200px;
  shape-outside: url('cloud.png');
  shape-image-threshold: 0.3;
  shape-margin: 15px;
  background: url('cloud.png') no-repeat;
}
</style>

Shape Margins and Clipping

shape-margin Property

.flower {
  shape-outside: url('flower.png');
  shape-margin: 20px;
  /* Creates a margin outside the shape */
}

Combining with clip-path

.hexagon {
  float: left;
  width: 200px;
  height: 220px;
  shape-outside: polygon(
    50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%
  );
  clip-path: polygon(
    50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%
  );
}

Dynamic Shape Effects

CSS animations can create dynamic wrapping effects:

@keyframes pulse {
  0% { shape-outside: circle(40%); }
  50% { shape-outside: circle(50%); }
  100% { shape-outside: circle(40%); }
}

.pulsing {
  animation: pulse 3s infinite;
}

Responsive Shape Design

Using CSS variables and media queries for responsive shapes:

:root {
  --shape-size: 150px;
}

@media (max-width: 768px) {
  :root {
    --shape-size: 100px;
  }
}

.responsive-shape {
  width: var(--shape-size);
  height: var(--shape-size);
  shape-outside: circle(50%);
}

Practical Layout Examples

Complex magazine layout example:

<div class="layout">
  <div class="shape1"></div>
  <div class="shape2"></div>
  <article>...</article>
</div>

<style>
.shape1 {
  float: left;
  width: 250px;
  height: 400px;
  shape-outside: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

.shape2 {
  float: right;
  width: 200px;
  height: 300px;
  shape-outside: url('abstract-shape.png');
  shape-image-threshold: 0.2;
}
</style>

Browser Compatibility Considerations

While modern browsers generally support shape-outside, a fallback is needed:

.shape {
  float: left;
  margin-right: 20px;
  /* Fallback style for traditional wrapping */
}

@supports (shape-outside: circle()) {
  .shape {
    shape-outside: circle(50%);
    margin-right: 0;
  }
}

Performance Optimization Tips

1. Avoid using complex polygons in scrolling containers
2. Use will-change for static shapes:

.optimized {
  will-change: shape-outside;
}

3. Limit the number of polygon points (typically no more than 20 points)

Creative Application Directions

1. Text wrapping around logo designs
2. Special poetry typography
3. Irregular text-image mixing for product display pages
4. Curved layouts for timeline designs
5. Combining with SVG for more precise shapes

<div class="svg-shape"></div>
<p>Text will wrap along the SVG path...</p>

<style>
.svg-shape {
  float: right;
  width: 300px;
  height: 300px;
  shape-outside: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path d="M20,20 L80,20 L60,80 Z"/></svg>');
}
</style>