communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Comment dessiner un demi-cercle droit en CSS

Comment dessiner un demi-cercle droit en CSS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer： 2021-12-06 11:46:14
original
3930 Les gens l'ont consulté

Méthode : 1. Ajoutez le style "width: width value; height: height value;" à l'élément et définissez l'élément sur un rectangle dont la largeur est la moitié de la hauteur. 2. Ajoutez "border-radius: 0 rectangle width; value rectangle width" au style d'élément Value 0;", définit les coins arrondis sur le rectangle, puis définit le rectangle sur le style de demi-cercle droit.

Comment dessiner un demi-cercle droit en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment dessiner un demi-cercle droit en CSS

En CSS, vous pouvez d'abord créer un élément rectangulaire dont la largeur est la moitié de la hauteur. L'exemple est le suivant :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    div{

width: 50px;

height: 100px;

background-color:red;

}

    </style>

</head>

<body>

    <div></div>

</body>

</html>

Copier après la connexion

Résultat de sortie :

Comment dessiner un demi-cercle droit en CSS

. Utilisez ensuite l'attribut border-radius pour le définir. Pour le style de coin arrondi à droite, définissez simplement la valeur du coin arrondi pour qu'elle soit aussi grande que la valeur de la largeur. L'exemple est le suivant :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    div{

width: 50px;

height: 100px;

background-color:red;

border-radius: 0 50px 50px 0;

}

    </style>

</head>

<body>

    <div></div>

</body>

</html>

Copier après la connexion

Résultat de sortie :

Comment dessiner un demi-cercle droit en CSS

(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
css
Article précédent：Comment écrire un seul côté des coins arrondis en CSS Article suivant：Comment définir l'ombre à droite et en bas de la bordure en CSS
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal