Comment dessiner une ellipse en CSS ?

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Afficher la discussion

Améliorer l’article

Enregistrer l’article

J’aime l’article

Dans cet article, nous allons apprendre à créer une ellipse à l’aide de CSS. Pour créer une ellipse, nous allons d’abord créer un simple rectangle de la hauteur et de la largeur souhaitées.

Approche Pour créer un rectangle : Afin de créer une ellipse de la taille souhaitée, nous allons créer un div en HTML et lui attribuer une classe nommée ellipse. Maintenant, nous allons définir la hauteur et la largeur de la div, elle ressemblera à un rectangle. Nous pouvons définir la couleur de fond selon notre choix.

Vous trouverez ci-dessous l’implémentation pour créer le rectangle.

HTML

<!DOCTYPE html>

<html>

   

<head>

    

    <style>

 

        /* Setting Height and Width of Rectangle */

        .ellipse{

            height: 100px;

            width: 150px;

            background-color: green;

        }

    </style>

</head>

 

<body>

 

    

    <div class="ellipse"></div>

</body>

 

</html>

Production:

Screenshot189

Rectangle

Approche pour créer une ellipse à partir d’un rectangle : Maintenant, pour convertir ce rectangle en ellipse, nous allons définir le border-radius refere à une valeur très élevée (50% à 100%). Il fait référence à la courbure aux coins de la forme. La hauteur du rectangle sera le petit axe de l’ellipse et la largeur sera le grand axe.

HTML

<!DOCTYPE html>

<html>

   

<head>

 

    

    <style>

 

        /* Setting Height and Width of Rectangle */

        .ellipse{

            height: 100px;

            width: 150px;

            background-color: green;

 

            /* Setting Border Radius */

            border-radius: 50%;

        }

    </style>

</head>

 

<body>

 

    

    <div class="ellipse"></div>

</body>

 

</html>

Production:

Screenshot190

Ellipse

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *