Méthode : 1. Placez l'élément circulaire dans le conteneur div ; 2. Réglez la hauteur du div sur le rayon du cercle et définissez la largeur du div sur le diamètre du cercle, de sorte que seulement la moitié du div peut être placé. Un cercle ; 3. Ajoutez le style "overflow: caché" à l'élément div et cachez le demi-cercle à l'extérieur du div.
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment masquer la moitié d'un cercle en CSS
En CSS, vous pouvez d'abord mettre un élément circulaire dans un div, puis définir la hauteur du div sur le rayon du cercle et la largeur sur le longueur du diamètre du cercle.
À ce stade, vous pouvez utiliser l'attribut overflow pour masquer la partie circulaire au-delà du div.
L'exemple est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.mask2{
width: 100px;
height: 50px;
overflow: hidden;
}
.round2{
width: 100px;
height: 100px;
background-color: cornflowerblue;
border-radius: 50px;
}
</style>
</head>
<body>
<div class="mask2">
<div class="round2"></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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
