Maison > Article > interface Web > Comment dessiner une ellipse avec des coins supérieurs et inférieurs pointus en CSS
Comment dessiner une ellipse avec des coins supérieurs et inférieurs pointus en CSS
- WBOYoriginal
- 2021-12-03 13:51:081946parcourir
Méthode : 1. Utilisez les attributs width et height pour définir l'élément sur un rectangle avec une valeur de hauteur supérieure à la valeur de largeur ; 2. Utilisez l'attribut "border-radius" pour définir l'élément rectangulaire sur une ellipse avec une partie supérieure nette. et les coins inférieurs. Donnez simplement l'élément rectangulaire. Ajoutez simplement le style "border-radius:100%;".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment dessiner une ellipse avec des coins pointus supérieurs et inférieurs en CSS
En CSS, vous pouvez utiliser les attributs width et height pour dessiner d'abord un rectangle, où la largeur définit la largeur du rectangle, et le L'attribut height définit la hauteur du rectangle. Définit la hauteur du rectangle pour qu'elle soit supérieure à la largeur du rectangle. Utilisez ensuite l'instruction border-radius:100% pour définir le rectangle de largeur, de longueur et de hauteur dans une ellipse, qui est une ellipse avec des coins supérieur et inférieur.
L'exemple est le suivant :
<!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: 100px;
height: 200px;
border:1px solid #000000;
border-radius:100%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Résultat de sortie :
(Partage de vidéos 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!