shape-outside: ellipse(40% 50% at left); shape-outside: ellipse(closest-side farthest-side at 30%);
An ellipse is essentially a squashed circle and so
ellipse() acts in a very similar way to
circle() except that we have to specify two radii x and y.
Uses the length from the center of the shape to the closest side of the reference box. For ellipses, this is the closest side in the radius dimension.
Uses the length from the center of the shape to the farthest side of the reference box. For ellipses, this is the farthest side in the radius dimension.
This example shows an ellipse with an x radius of 40%, a y radius of 50% and the position being left. This means that the center of the ellipse is on the left edge of the box giving us a half ellipse shape to wrap our text around. You can change these values to see how the ellipse changes.
The keyword values of
farthest-side are useful to create a quick ellipse based on the size of the floated element reference box.
|CSS Shapes Module Level 2 |
BCD tables only load in the browser