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 property, which makes a content float to either the left or right. float This property takes the following functions as its values: circle() inset(), ellipse(), polygon() URL() Syntax -outside: polygon( [&lt; -rule&gt;,]? [&lt; -arg&gt; &lt; -arg&gt;]# )<br> -outside: circle(percentage)<br> -outside: (x y)<br> -outside: inset(top right bottom left)<br> -outside: url(absolute url) shape fill shape shape shape shape ellipse shape shape Now let’s see how it is implemented in real life: { : (50%); }< > { : (0 0, 0 10em, 20em 30em); }< > { : (10em 20em at 30% 50%); }< > { : (10em 10em 10em 10em 10em); }< > { : ( ); } .element shape-outside circle br .element shape-outside polygon br .element shape-outside ellipse br .element shape-outside inset br .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( <code = > % % , <code = > % % , <code = > % % ); <br>clip-path: circle(3em at 3em 3em); 6 class "markup--code markup--pre-code" 0 0 </ > code class "markup--code markup--pre-code" 0 100 </ > code class "markup--code markup--pre-code" 100 100 </ > code clip-path: ellipse(6em 3em at 12em 4em); < > br 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 wrap around a floated element’s bounding box. shape-outside There are four valid values for the float property. and float elements to specified directions respectively. Left Right (the default) ensures the element will not float and which will assume the float value from that elements parent element. None Inherit { : left; : (50%); } .element float shape-outside circle Conclusion { : left; : (0 0, 3em 4em, 5em 2em, 7em 5em); : (); } .element float shape-outside polygon clip-path polygon In this article, we have learned three CSS properties . Shape-outside Clip-path Float. For a detailed explanation visit the following links below: float clip-path shape-outside
