Using CSS Shape-Outside, Clip-path and float property for Shape Creation

INTRODUCTION

Great web design comes with great shapes that make the website have the looks it deserves. In the past, web applications were usually described as being made of boxes. Meaning, anything you see on the website is enclosed in a box. Now we can confidently say that websites are not only made of boxes but different varieties of shapes.

To build a user-friendly app that users interact with. We need different kinds of shapes to represent our content. In this article, I will like to refresh our minds on three main CSS properties. To design a shape in modern web application, we will focus on the following CSS properties:

* shape-outside

* clip-path

* float

Shape-outside property

The functionality of this property is to define a shape around which adjacent inline content should wrap. It works with float property, which makes a content float to either the left or right. This property takes the following functions as its values: 1.circle() 2. inset(), 3. ellipse(), 4. polygon() 5. URL() etc.

Syntax

shape-outside: polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
shape-outside: circle(percentage)
shape-outside: ellipse(x y)
shape-outside: inset(top right bottom left)
shape-outside: url(absolute url)

Now let’s see how it is implemented in real life

.element { shape-outside: circle(50%); }
.element { shape-outside: polygon(0 0, 0 10em, 20em 30em); }
.element { shape-outside: ellipse(10em 20em at 30% 50%); }
.element { shape-outside: inset(10em 10em 10em 10em 10em); }
.element { shape-outside: url('https://www.microverse.org'); }

Play around with the values and you will see the shapes you can make out of this amazing CSS property.

Clip-path property

This property attaches the element’s content to the base shape. It also allows us to specify a region of an element to display. Clip-path also accepts the same values as the shape-outside. For this article, our focus will be on the function values.

clip-path: polygon(60% 0%, 0% 100%, 100% 100%);
clip-path: ellipse(6em 3em at 12em 4em);
clip-path: circle(3em at 3em 3em);

Let’s play around with the values and see it in action.

Float property

Float property floats the content to the specified direction. This property is very important when using shape-outside property. Because shape-outside wrap around a floated element’s bounding box. There are four valid values for the float property. Left and Right float elements to specified directions respectively. None (the default) ensures the element will not float and Inherit which will assume the float value from that elements parent element.

.element { float: left; shape-outside: circle(50%); }

Conclusion

.element { float: left; shape-outside: polygon(0 0, 3em 4em, 5em 2em, 7em 5em); clip-path: polygon(); }

In this article, we have learned three CSS properties . 1. Shape-outside 2. Clip-path 3. Float. For a detailed explanation visit the following: * float * clip-path * shape-outside.

If you like this article, please click on the clap icon. My next article will be on Hash Tables. You can find me on the following social media platforms Linkedin Facebook