ellipse()

Die ellipse() CSS-Funktion ist eine der <basic-shape> Datentypen.

Probieren Sie es aus

clip-path: ellipse(20px 50px);

clip-path: ellipse(4rem 50% at right center);

clip-path: ellipse(closest-side closest-side at 5rem 6rem);

clip-path: ellipse(closest-side farthest-side);

<section class="default-example" id="default-example">
 <div class="transition-all" id="example-element"></div>
</section>

#default-example {
 background: #ffee99;
}
#example-element {
 background: linear-gradient(to bottom right, #ff5522, #0055ff);
 width: 100%;
 height: 100%;
}

Syntax

shape-outside: ellipse(40% 50% at left);
shape-outside: ellipse(closest-side farthest-side at 30%);

Eine Ellipse ist im Wesentlichen ein gestauchter Kreis und daher funktioniert ellipse() sehr ähnlich wie circle(), mit dem Unterschied, dass wir zwei Radien x und y angeben müssen.

Werte

<shape-radius>

Zwei Radien, x und y in dieser Reihenfolge. Diese können eine <length>, ein <percentage>, oder die Werte closest-side und farthest-side sein.

closest-side

Verwendet die Länge vom Zentrum der Form zur nächstgelegenen Seite des Referenzkastens. Für Ellipsen ist dies die nächstgelegene Seite in der Radienrichtung.

farthest-side

Verwendet die Länge vom Zentrum der Form zur entferntesten Seite des Referenzkastens. Für Ellipsen ist dies die entfernteste Seite in der Radienrichtung.

<position>

Verschiebt das Zentrum der Ellipse. Kann eine <length>, ein <percentage>, oder Werte wie left sein. Der <position>-Wert ist standardmäßig zentriert, wenn er weggelassen wird.

Formale Syntax

<ellipse()> = 
 ellipse( <radial-size>? [ at <position> ] ? ) 

<radial-size> = 
 <radial-extent> | 
 <length [0,∞]> | 
 <length-percentage [0,∞]>{2} 

<position> = 
 <position-one> | 
 <position-two> | 
 <position-four> 

<radial-extent> = 
 closest-corner | 
 closest-side | 
 farthest-corner | 
 farthest-side 

<length-percentage> = 
 <length> | 
 <percentage> 

<position-one> = 
 left | 
 center | 
 right | 
 top | 
 bottom | 
 x-start | 
 x-end | 
 y-start | 
 y-end | 
 block-start | 
 block-end | 
 inline-start | 
 inline-end | 
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] | 
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | 
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] | 
 [ start | center | end ] {2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] | 
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] | 
 [ [ start | end ] <length-percentage> ] {2} 

Beispiele

Einfaches Beispiel für ellipse()

Dieses Beispiel zeigt eine Ellipse, die nach links ausgerichtet ist und einen horizontalen Radius von 40%, einen vertikalen Radius von 50% und eine linke Position hat. Das bedeutet, dass sich das Zentrum der Ellipse an der linken Kante des Kastens befindet, was uns eine halbkreisförmige Ellipse gibt, um unseren Text darum zu wickeln. Klicken Sie auf "Abspielen" in den Codeblöcken, um diese Werte zu ändern und zu sehen, wie sich die Ellipse verändert:

<div class="box">
 <div class="shape"></div>
 <p>
 One November night in the year 1782, so the story runs, two brothers sat
 over their winter fire in the little French town of Annonay, watching the
 grey smoke-wreaths from the hearth curl up the wide chimney. Their names
 were Stephen and Joseph Montgolfier, they were papermakers by trade, and
 were noted as possessing thoughtful minds and a deep interest in all
 scientific knowledge and new discovery. Before that night—a memorable night,
 as it was to prove—hundreds of millions of people had watched the rising
 smoke-wreaths of their fires without drawing any special inspiration from
 the fact.
 </p>
</div>

body {
 font: 1.2em / 1.5 sans-serif;
}
.shape {
 float: left;
 shape-outside: ellipse(40% 50% at left);
 margin: 20px;
 width: 100px;
 height: 200px;
}

Verwendung von closest-side / farthest-side Werten

Die Schlüsselwortwerte closest-side und farthest-side sind nützlich, um schnell eine Ellipse basierend auf der Größe des referenzierten Kastens des schwebenden Elements zu erstellen.

<div class="box">
 <div class="shape"></div>
 <p>
 One November night in the year 1782, so the story runs, two brothers sat
 over their winter fire in the little French town of Annonay, watching the
 grey smoke-wreaths from the hearth curl up the wide chimney. Their names
 were Stephen and Joseph Montgolfier, they were papermakers by trade, and
 were noted as possessing thoughtful minds and a deep interest in all
 scientific knowledge and new discovery. Before that night—a memorable night,
 as it was to prove—hundreds of millions of people had watched the rising
 smoke-wreaths of their fires without drawing any special inspiration from
 the fact.
 </p>
</div>

body {
 font: 1.2em / 1.5 sans-serif;
}
.shape {
 float: left;
 shape-outside: ellipse(closest-side farthest-side at 30%);
 margin: 20px;
 width: 100px;
 height: 140px;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Eigenschaften, die diesen Datentyp verwenden: clip-path, shape-outside
• Leitfaden zu grundlegenden Formen