CSS Function - ellipse()

An ellipse can be thought of as a distorted circle, and the CSS ellipse() function works similarly to the circle() function.

However in the case of ellipse(), both the horizontal (x) and vertical (y) radius must be specified.

Possible Values

  • <shape-radius> - Two radii, x and y, are required in this sequence. These values can be specified as <length>, <percentage>, or with keywords such as closest-side and farthest-side.

    • closest-side - Uses the distance between the center of the shape and the closest side of the reference box. In the case of ellipses, this refers to the closest side along the radius dimension.

    • farthest-side - Uses the distance from the center of the shape to the outermost side of the reference box. In the context of ellipses, this refers to the farthest side.

  • <position> - Moves the center of the ellipse. Can be a <length>, <percentage> or a keyword such as left and right. If nothing is specified, the <position> is set to the center point by default.

Syntax

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

CSS ellipse() - Basic Example

The following example demonstrates the working of ellipse() with shape-outside property.

<html>
<head>
<style>
   .ellipse-container {
      float: left;
      width: 280px;
      height: 250px;
      shape-outside: ellipse(45% 40%);
      background: lightblue; 
   }
</style>
</head>
<body>
<div class="ellipse-container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Nullam viverra suscipit massa, sit amet lobortis quam sollicitudin sed. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur. Sed nec eros et risus ullamcorper commodo. In hac habitasse platea dictumst.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum sodales tellus, non fermentum tortor fermentum id. Ut vitae urna ipsum. Duis congue fringilla elit, id sodales elit vehicula sit amet. Integer a nisl sed mi luctus efficitur.</p>
</body>
</html>

CSS ellipse() - Positioning The Ellipse

In the following example, the ellipse() CSS function is used to create an ellipse using the clip-path and shape-outside properties.

<html>
<head>
<style>
   .ellipse-demo {
      width: 300px;
      height: 200px;
      text-align: center;
      font-size:15px;
      background-color: lightgray;
      clip-path: ellipse(50% 50% at 50% 50%);
      shape-outside: ellipse(100% 60% at left);
      float: left;
      margin-right: 20px;
   }
   .content {
      margin-top: 20px;
   }
</style>
</head>
<body>
   <h1>Elliptical Text Wrapping Example</h1>
   <div class="ellipse-demo"></div>
   <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at lectus augue. Sed vel semper libero. Integernec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi.</p>
      <p>Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.</p>
   </div>
</body>
</html>
Advertisements