# CSS Shapes

CSS Shapes allow you to define geometric shapes that text can flow around. By default, text flows around a rectangular box (the margin box), but with CSS Shapes, you can make it flow around circles, ellipses, polygons, or even images.

## 1. The `shape-outside` Property

The core property is `shape-outside`. It defines a shape around which inline content should wrap.

**Important:** The element applying `shape-outside` must be **floated** (`float: left` or `float: right`).

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

## 2. Basic Shapes

CSS provides functions to define shapes.

### `circle()`
Creates a circle.
*   Syntax: `circle(radius at position)`

```css
shape-outside: circle(50%); /* Circle with radius 50% of element width */
shape-outside: circle(100px at 0 0); /* 100px radius at top-left corner */
```

### `ellipse()`
Creates an ellipse.
*   Syntax: `ellipse(radius-x radius-y at position)`

```css
shape-outside: ellipse(50% 80px);
```

### `inset()`
Defines an inset rectangle. This is useful for creating padding inside the shape.
*   Syntax: `inset(top right bottom left round border-radius)`

```css
shape-outside: inset(10px 10px 10px 10px round 10px);
```

### `polygon()`
Defines a polygon using pairs of x/y coordinates.
*   Syntax: `polygon(x1 y1, x2 y2, ...)`

```css
/* A triangle */
shape-outside: polygon(50% 0, 100% 100%, 0 100%);
```

## 3. Shapes from Images

You can use an image with an alpha channel (transparency) to define the shape. The text will wrap around the opaque parts of the image.

```css
.shape {
  float: left;
  shape-outside: url('image.png');
  shape-image-threshold: 0.5; /* Defines opacity level considered "inside" */
}
```

## 4. `shape-margin`

Adds a margin around the defined shape, pushing the text further away.

```css
shape-margin: 20px;
```

## 5. `clip-path` vs. `shape-outside`

*   **`clip-path`**: Cuts the element itself into a shape. It affects visibility (painting). It does **not** affect layout flow (text still sees a rectangle unless `shape-outside` is also used).
*   **`shape-outside`**: Defines how *other* content flows around the element. It does not change the appearance of the element itself (it still looks rectangular unless `clip-path` or `border-radius` is used).

Often, they are used together:

```css
.circle {
  float: left;
  width: 200px;
  height: 200px;
  background: red;
  /* Visual shape */
  clip-path: circle(50%);
  /* Layout shape */
  shape-outside: circle(50%);
}
```

[[programming/css/css]]
[[programming/css/box-model]]