Tutorial

Shape-outside

The shape-outside CSS3 property is like a dream come true for web designers and developers alike, since it allows us to unleash our creative imagination outside the boundaries of image-editing software programs like Adobe. With the help of shape-outside we can now code geometric shapes and forms directly into our layouts, without having to worry about altering the readability aspect of our designs. The biggest advantage of shape-outside is the malleability of text, which can seamlessly flow around our shapes, in perfect synergy with our creative vision. I summarized some very basic examples below as an introduction to the shape-outside property.

Polygon shape

See how this text paragraph aligns with the triangle shape from the left ?! That is basically the biggest advantage of the shape-outside CSS3 property. Your text can nicely flow around the shapes you create.

Code
HTML
```
<div class="polygon"></div>
<p>Your text goes here</p>
<div style="clear: both;"></div>
```
CSS
```
.polygon {
	float         : left;
	background    : #099;
	width         : 200px;
	height        : 300px;
	shape-outside : polygon(0 0, 0 300px, 200px 300px);
	clip-path     : polygon(0 0, 0 300px, 200px 300px);
	shape-margin  : 30px;
	}

p {	text-align : justify; }
```
Circle shape

We positioned the circle shape like this because we only wanted to make the bottom-right part of it visible, not the entire circle. Should you want to use a full circle, simply change the CSS code from 0% to 50%. Have fun building those circles !

Code
HTML
```
<div class="circle"></div>
<p>Your text goes here</p>
<div style="clear: both;"></div>
```
CSS
```
.circle {
	float         : left;
	background    : #099;
	width         : 400px;
	height        : 400px;
	shape-outside : circle(50% at 0% 0%);
	clip-path     : circle(50% at 0% 0%);
	shape-margin  : 20px;
	}

p {	text-align : justify; }
```

World's largest cryptocurrency exchange

site menu

Shape-outside

Polygon shape

Circle shape