CSS Exclusions and Shapes is moving forward

I am excited to share this great news: CSS Exclusions and Shapes has reached a new milestone. Now you can use the shape-outside attribute to punch holes into your text. These can be circles, elipses, rounded rectangles, and polygons.

Here is an example of what you can do with this feature:

cssexclusions

The CSS for the example above is really simple:


.float-left {
 float: left;
 shape-outside: rectangle(0, 0, 100%, 100%, 40%, 50%);
}

.float-right {
 float: right;
 shape-outside: polygon(80% 0, 100% 0, 100% 100%, 10% 100%, 0% 80%);
}

.container {
 width: 600px;
 border: 1px solid black;
 padding: 5px;
 font-family: "source-sans-pro", sans-serif;
}

You can see more examples here:

To see the examples, be sure to use the latest Canary build. If you haven’t already done so, enable the Enable experimental WebKit features flag, and then restart the browsers.

You might also want to read this post. If you want to send us your feedback, please do it. I am pretty good at talking with our engineers :)

Leave a Reply

Your email address will not be published. Required fields are marked *