CSS shape-outside Property

Description

The shape-outside property defines a shape around which text should be wrapped, with possible modifications from the shape-margin property. The shape defined by shape-outside and shape-margin changes the geometry of a float element's float area.

Initial value: none
Applies to: Floats
Inherited: No
Media: Visual
Computed value: as defined for <basic-shape> (with <shape-box> following, if supplied); else the computed <image>; else the keyword as specified
Animatable: Yes
CSS Version: Candidate Recommendation
JavaScript syntax: object.style.shapeOutside

Syntax

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

Values

noneThe float area is unaffected.
<basic-shape>The shape is computed based on the values of one of inset, circle, ellipse or polygon. If shape-box is not supplied, then the reference box defaults to margin-box.
<shape-box>The shape is defined by the CSS Box Model of the element the shape is applied to: margin-box, border-box, padding-box or content-box
<image>If <image> references an image, the shape is extracted and computed based on the alpha channel of the image as defined by shape-image-threshold. If <image> does not reference an image or if the fetch attempt results in any error such that there is no fallback image, the effect is as if the value auto had been specified.

Example

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

.main {
  width: 530px;
}
.left,
.right {
  width: 40%;
  height: 12ex;
  background-color: lightgray;
}
.left {
  -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
  shape-outside: polygon(0 0, 100% 100%, 0 100%);
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.right {
  -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  shape-outside: polygon(100% 0, 100% 100%, 0 100%);
  float: right;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
p {
  text-align: center;
}

Result