CSS Shape-Outside

Today I came across the css 'Shape-Outside' property, which I feel interesting to share. There are times, where we  need to add images and text next to each other. We can do it easily by floating the image then, the text automatically adjust next to image. Problem here here is, image occupies actual width and then text starts after that. What if, we had been told to adjust text around the image, utilizing the empty space.

Then the "Shape-outside" property come to the picture.

The shape-outside CSS property defines the shape around which content will wrap on the outside of an element. This example simulates a circle exclusion with an exaggerated rounded corners rectangle. The shape is applied to a floated element so that content will wrap around it.

The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box.

The syntax for this property as follows.

Formal syntax: none | <shape-box> || <basic-shape> | <image>

shape-outside: none
shape-outside: margin-box
shape-outside: content-box
shape-outside: border-box
shape-outside: padding box

shape-outside: circle()
shape-outside: ellipse()
shape-oustide: inset(10px 10px 10px 10px)
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px)

shape-outside: url(image.png)

shape-outside: initial
shape-outside: inherit
shape-outside: unset

Values
none
The float area is unaffected

<shape-box>
If one of these is specified by itself the shape is computed based on one of 'margin-box', 'border-box', 'padding-box' or 'content-box' which us their respective boxes including curvature from border-radius, similar to 'background-clip'.

<basic-shape>
The shape is computed based on the values of one of 'inset()', 'circle()', 'ellipse()' or 'polygon()'. If a is also supplied, this defines the reference box for the function. If is not supplied, then the reference box defaults to 'margin-box'.

<image> The shape is extracted and computed based on the alpha channel of the specified as defined by 'shape-image-threshold'.

User agents must use the potentially CORS-enabled fetch method defined by the HTML5 specification for all URLs in a 'shape-outside' value. When fetching, user agents must use "Anonymous" mode, set the referrer source to the stylesheet's URL and set the origin to the URL of the containing document. If this results in network errors such that there is no valid fallback image, the effect is as if the value 'none' had been specified.

Lets see some examples how this works and how helpful is this.

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: 500px;
     height: 200px;
}
.left {    
-webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%);
float: left;
width: 40%;
height: 12ex;
background-color: lightgray;
-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
}  
.right
{    
-webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%);
float: right;
width: 40%;  
height: 12ex;
background-color: lightgray;
-webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
}  
p
{    
text-align: center;
}

This will gives us output as follows.

Let see another example with image as background.

HTML:

<div class='container'>
    <header>
        <h1>The Lake Isle of Innisfree</h1>
    </header>

    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/bee-hive-v2.png'/>

    <p>I will arise and go now, and go to Innisfree,<br/>
    And a small cabin build there, of clay and wattles made;<br/>
    Nine bean-rows will I have there, a hive for the honey-bee,<br/>
    And live alone in the bee-loud glade.</p>

    <p>And I shall have some peace there, for peace comes dropping slow,<br/>
    Dropping from the veils of the morning to where the cricket sings;<br/>
    There midnight’s all a glimmer, and noon a purple glow,<br/>
    And evening full of the linnet’s wings.</p>

    <p>I will arise and go now, for always night and day<br/>
    I hear lake water lapping with low sounds by the shore;<br/>
    While I stand on the roadway, or on the pavements grey,<br/>
    I hear it in the deep heart’s core.</p>
    <h3>- William Bultler Yeats</h3>
</div>

CSS:

body { font-family: 'Vollkorn', serif; }

h1, h3 { white-space: pre; }

h1 {
  font-size: 1.5em;
  margin-bottom: 0;
}

h3 { font-size: 1.25em; }

.container p { font-size: 1.2em; }

img {
  width: 45vw;
  height: auto;
  float: left;
  shape-outside: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/28727/bee-hive-mask_1.png');
  shape-image-threshold: 0.2;
  shape-margin: 10px;
}

.container {
  margin: .5em auto;
  padding: 1.5em;
  padding-top: 0;
  width: 95vw;
}

/* ==== Media Queries ==== */
@media only screen and (min-width: 480px) {
  h1 {
    font-size: 1.8em;
    margin-left: 1.5em;
  }

  h3 { font-size: 1.4em; }
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 2.5em;
    margin-left: 3em;
  }
  h3 { font-size: 1.6em; }
}

@media only screen and (min-width: 1140px) {
  img { max-width: 45vw; }
}

Following is how the above code shows up.

Here in both examples, text adjusted next to image with out any extra space wasted.

NOTE: This examples works fine in latest Chrome browser.