The CSS As with the other functions that produce a basic shape \u2014 including Clarification note:<\/strong> Neither Before we get too deep, let\u2019s discuss the reference box. This is the box upon which the basic shapes used in By default, the box defined by the outer edges of the margins is the reference box, so a shape must fit inside the reference box to have an effect. If the shape is larger than the reference box, then the outer edges of the element will remain intact, i.e. its unmodified rectangular form.<\/p>\n\n\n\n For the The Let\u2019s start with an example using the circle()<\/code> function allows you to create, you guessed it, circles<\/em> when used with the shape-outside<\/code><\/a>, clip-path<\/code><\/a>, and offset-path<\/code><\/a> properties.<\/p>\n\n\n\n\n\n\n\n.shape {\n clip-path: circle(100px);\n}<\/code><\/pre>\n\n\n\u201cDrawing\u201d shapes<\/h3>\n\n\n
ellipse()<\/a><\/code>, inset()<\/a><\/code>, xywh()<\/a><\/code>, polygon()<\/code>, path()<\/code><\/a> and shape()<\/code><\/a> \u2014 you won\u2019t be drawing shapes directly on the screen in the way you\u2019d normally think. You will either be creating a shape for text and elements to flow around (shape-outside<\/code>), creating a cookie cutter to cut the shape out of another element (clip-path<\/code>), or creating a shape that another element could move along (offset-path<\/code>).<\/p>\n\n\n\npath()<\/code> nor shape()<\/code> can be used with the shape-outside<\/code> property like the other basic shape functions.<\/p>\n\n\nReference box<\/h3>\n\n\n
shape-outside<\/code> and clip-path<\/code> is formulated.<\/p>\n\n\n\nshape-outside<\/code> property, this means the text and elements will flow around the element as if no shape-outside<\/code> property was used. For clip-path<\/code>, it similarly means that nothing will be clipped because the entire element fits within the cookie cutter. If you need to change the reference box, you\u2019ll need to add the appropriate keyword (margin-box<\/code>, padding-box<\/code>, border-box<\/code>, etc.) to clip-path<\/code> or shape-outside<\/code>.<\/p>\n\n\n\noffset-path<\/code> property is not limited by the reference box in the same way shape-outside<\/code> and clip-path<\/code> are limited by it. An offset-path<\/code> whose shape is well outside the reference box will still allow an element to move along it, however, the reference box used can affect where and how the shape is \u201cdrawn.\u201d For instance, offset-path<\/code> cares about the reference box when you use closest-side<\/code> or farthest-side<\/code> to set the radius (discussed in detail below).<\/p>\n\n\nBasic usage<\/h3>\n\n\n
clip-path<\/code> property so that we can more easily see the size and edges of the circles we create. We\u2019ll go into more detail soon, but you can just give circle()<\/code> a radius and it will create a rhombus\u2026 sorry, I\u2019m being told that\u2019s wrong. It says here\u2026 Oh, yes. It makes a circle.<\/p>\n\n\n\n<div class=\u201ccircuitous\u201d><\/div><\/code><\/pre>\n\n\n\n.circuitous {\n width: 200px;\n height: 200px;\n background-color: aquamarine;\n clip-path: circle(100px);\n}<\/code><\/pre>\n\n\n\n